反应.js |通过道具样式与编写 CSS-in-JS答案

【问题标题】：React.js | Styling via Props vs. Writing CSS-in-JS反应.js |通过道具样式与编写 CSS-in-JS
【发布时间】：2020-03-31 23:07:17
【问题描述】：

各种库通过组件的 props 提供样式解决方案，而长期以来的“标准”方式一直是单独编写 CSS。

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

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

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

*免责声明：我在 CSS-in-JS 和 React 中的样式方面没有太多经验，所以我可能对事情的总体情况/总体情况有错误的印象。

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

【问题讨论】：

我的 2 美分：material-UI 的架构 (material-ui.com/styles/basics) 传递和合并 classes（其骨干是 JSS），如果使用得当，绝对令人愉快。我讨厌将类似 css 的道具传递给组件，但我在传递类时完全没有问题。

标签： javascript css reactjs css-in-js

【解决方案1】：

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

【讨论】：

它确实有效，例如在 Material-UI 中，这是一个非常大的样式库，我为此举了一个例子。

【解决方案2】：

您询问这些情况的优缺点：

动态`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）。
此类实现与 UI 库解耦
- 可能有一个可以跨项目使用的库，但为什么不使用 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 的好处（谷歌搜索）。

缺点：

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

【讨论】：

动态className

CSS-in-JS

动态`className`