使用样式参数的样式组件与功能组件答案

【问题标题】：Styled-Components vs functional component using the style parameter使用样式参数的样式组件与功能组件
【发布时间】：2021-04-13 03:53:05
【问题描述】：

我只是问自己，除了节省一些 LOC 之外，在响应中使用样式组件而不是自定义功能组件的原因是什么。示例代码：

const StyledButton = (props) => (
  <button
    style={{
      color: '#E8E8E8',
      padding: '8px 16px',
    }}
    {...props}
  />
);

const jsx = () => <div><StyledButton>Click Me!</StyledButton></div>;

const StyledButton = styled.button`
  color: '#E8E8E8';
  padding: '8px 16px';
`;

const jsx = () => <div><StyledButton>Click Me!</StyledButton></div>;

亲切的问候，托马斯

【问题讨论】：

简洁的代码，最重要的是 CSS 类范围。如果你想做有条件的样式更改样式化组件优雅的方式来做，而不是嵌套内联样式。还有几个。
即使唯一的区别是我不必在每个 CSS 值和所有 CSS 属性的驼峰式中使用“引号”，我也不会回去 :) 你会如何设置伪样式-具有内联样式的元素和伪选择器？你会如何设计spans 和button 中的图标？

标签： javascript reactjs frontend styled-components react-functional-component

【解决方案1】：

使用样式组件，您可以充分利用 css 的强大功能，这意味着您可以：

覆盖子标签和类的css
使用:visited、:first等伪类
使用hover和其他ui状态
轻松使用 css 变量

仅举几个例子，但显然 css 默认情况下可以做的任何其他事情都需要额外的 javascript 来处理普通样式。

您还可以阅读有关motivation behind styled-components here 的更多信息。

【讨论】：