Javascript React.js |通过道具设计样式与用js编写CSS

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

随着JS中CSS的发明，现在有了一些我们以前没有的好处（例如字符串文本、条件类、扩展功能的插件等），在分离级别上，它可以像HTML中的CSS样式标记一样使用，可以在“主”文件（CSS中的HTML）中定义一个编写代码的环境，我们有更大的灵活性，但以JSS为例，据我所知，将样式代码集中在

类

对象中是一种常见的做法

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

所以，我的问题是： 与使用组件道具编写样式化代码相比，您认为编写cssinj有哪些优点和缺点

*免责声明：我对JS中的CSS和React中的样式设计没有太多经验，因此我可能对总体/整体情况有错误的印象

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

把课传给大家。

---

将类似CSS的道具传递给组件是行不通的。

您会询问这些情况的利弊：

动态

className

const useStyles=makeStyles({
根目录：{
背景：“线性梯度（45度，Fe6B30%，FF8E53 90%），
边界：0，
边界半径：3，
boxShadow:'0 3px 5px 2px rgba（255、105、135、3）'，
颜色：'白色'，
身高：48，
填充：“0 30px”，
},
});
导出默认函数App（）{
const classes=useStyles（）；
返回我的按钮；
}

这是一个更好的实现：

import './myStyle.css'

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

import./myStyle.css'
导出默认函数App（{styleName}）{
返回我的按钮；
}

优点：

• 简单明了

缺点：

• 编写类似CSS的对象（不是真正的CSS）
• 此类实现与UI库解耦
  • 可能有一个库可以跨项目使用，但为什么不在JS中使用CSS呢

JS中的CSS

const PrettyButton=已设置样式（按钮）`
背景：线性梯度（45度，Fe6B30%，ff8e53 90%）；
边界：0；
边界半径：3；
boxshadow:0 3px 5px 2px rgba（255,105,135,0.3）；
颜色：白色；
身高：48；
填充：0 30px；
`;
导出默认函数App（）{
返回我的按钮；
}

优点：

• 编写一个真正的CSS（您可以自动完成、CSS格式化、样式筛选，而不是编写容易出错的字符串文字等）
• JS中的CSS好处（谷歌it）

缺点：

• 关于为什么不在JS（googleit）中使用CSS的争论

---

我的2美分：material UI的体系结构（）传递和合并

类

（其主干是JSS），如果使用正确，绝对令人愉快。我讨厌将css类的道具传递给组件，但传递类一点问题都没有。它确实有效，比如在Material UI中，一个非常大的样式库中，我给出了一个例子。

import './myStyle.css'

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

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>;
}