React.js |通过道具进行样式与编写CSS-in-JS

Question

各种库通过组件的支持提供样式解决方案，而长期以来，“标准”方式是分别编写CSS。

随着CSS-in-JS的发明，现在有可能获得我们以前没有的一些好处（例如，字符串文字，条件类，扩展功能的插件等），并且在分离级别上，可以像HTML中的CSS样式标签一样使用，可以在“主”文件（对于CSS为HTML）中定义用于编写代码的环境，我们具有更大的灵活性，但例如使用JSS ，据我所知，将样式代码集中在classes对象中是一种常见的做法。

另一方面，我们不仅可以在组件中编写内联CSS，而且各种库都可以提供样式解决方案作为组件的支持，例如Material-UI。

所以，我的问题是： 与使用组件道具编写样式代码相比，您认为编写CSS-inJS有什么优点和缺点？

  

*免责声明：我对CSS-in-JS和React中的样式通常没有太多的经验，所以我可能对总体情况/整体印象不太正确。

     

*请注意，我并不是在问组件的内联CSS，这不是内联还是非内联问题，而是更具体的问题。

Answer 1

您询问这些情况的利弊：

动态className

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function App() {
  const classes = useStyles();
  return <Button className={classes.root}>My Button</Button>;
}

哪个是更好的实现：

import './myStyle.css'

export default function App({ styleName }) {
  return <Button className={styleName}>My Button</Button>;
}

优点：

• 简单直接。

缺点：

• 编写类似CSS的对象（不是真正的CSS）。
• 这种实现已与用户界面库分离
  • 也许有一个可以在项目中使用的库，但是，为什么仍然不使用CSS-in-JS呢？

CSS-in-JS

const PrettyButton = styled(Button)`
  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
  border: 0;
  borderradius: 3;
  boxshadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
  color: white;
  height: 48;
  padding: 0 30px;
`;

export default function App() {
  return <PrettyButton>My Button</Button>;
}

优点：

• 编写真实的CSS（您将获得自动完成功能，CSS格式设置，样式替换，不编写容易出错的字符串文字等）
• CSS-in-JS的好处（Google it）。

缺点：

• 关于为什么不使用CSS-in-JS（Google it）的争论。

Answer 2

传递课程。 将CSS之类的props传递给组件是行不通的。