如何使用样式化组件更改 React 组件的样式

Question

我有这个 React 组件，它是一个简单的按钮组件：

const Button = ({ children }) => <button>{children}</button>;

我试图将上述组件传递到 styled 中，以便尝试像这样更改其样式：

const StyledButton = styled(Button)`
  color: yellow; //does not work

  button {
    color: yellowgreen; //does not work
  }
`;

我是样式化组件的新手，所以我什至不确定这是否可行。

提前感谢您的帮助！

Answer 1

当为您的自定义 React 组件使用 styled-components 时，styled-components 需要知道在哪里注入您想要给 <button> 标签的 CSS。这是通过将 className 道具传递给 Button 组件并将其作为道具传递给 <button> 标签来完成的。

请尝试像这样编辑您的代码：

const Button = ({ children, className }) => <button className={className}>{children}</button>;

您可以在此处阅读更多相关信息 Styled Components - Existing CSS。

如何使用样式化组件更改 React 组件的样式

How to change styles of react component using styled components

styled-components