javascript - 更新传入组件的样式 - ReactJS

Question

我是 React 的新手，我一直坚持使用样式化组件来设计组件样式。

const SearchBarContainer_Button = styled.button`
      padding: 10px;
      margin-left: 10px;
      width: 300px;
`;


<ButtonOne
  style={SearchBarContainer_Button}
  type="submit"
  className="search-bar__button"
>
  {this.props.buttonText || 'search'}
</ButtonOne>

这是我的 ButtonOne 中的内容:

import React from 'react';
import styled from 'styled-components';

const Button_One = styled.button`
      cursor:pointer;
      border: none;
      background-color: #fff;
      color: #000;
      font-size: 12px;
      font-weight: 900;
`;

export const ButtonOne = (props) => (
  <Button_One className={props.className}>{props.children}</Button_One>
);

我不知道自己做错了什么，非常感谢您的指导。

谢谢。

Answer 1

嗯，你读过样式化组件的文档了吗？它们的样式为 COMPONENTS

这意味着当你指定

const Button_One = styled.button`
 cursor: pointer
`

你需要把它当作组件来使用

<Button_one ...props />

您不能传递 style={StyledComponent} 它是组件而不是带有样式的对象文字。如果你想在这里扩展样式组件是链接 https://www.styled-components.com/docs/basics#extending-styles