将全局类名与组件特定样式结合起来

Question

我正在构建一个设计系统，我将重点放在架构上 - 我希望它是一种良好的开发人员体验。

Bootstrap 用于此系统，但也与特定于组件的样式一起使用。我想我想要CSS-in-JS，因为我喜欢在实际组件中编写样式，而不是在不同的 CSS 文件中。

我有个想法，大概是这样的：

const componentSpecificStyle = `margin-bottom: 0rem;`  

const globalBootstrapClass = ['card', 'card-body']

return <div someArgument={componentSpecificStyle + globalBootstrapClass} />

这样它会是标准的，两种类型的类，一个关于元素的参数，对于未来的开发者来说更​​少的混乱。

我尝试过的

1. 查看了Styled-Components 和Emotion，据我所知，他们并没有帮助我实现这一目标。可以这样做

const Component = styled.div`margin-bottom: 0rem;`

return <Component className={'card card-body'}

但对我来说似乎有点笨拙。

1. React-Bootstrap 将是一个解决方案，但我认为我通常最终会添加额外的类名，所以我不会抽象掉它......

例如

import { Card } from 'react-bootstrap'

const componentSpecificStyle = `margin-bottom: 0rem;`

return <Card.body style={{componentSpecificStyle}} />

或类似的东西......但正如我所说，如果我想在此之上添加另一个类名怎么办？然后我们以三种不同的方式进行样式设置，react-bootstrap、inline-ish style 和 className。

问题

我是否让它变得不必要的复杂？

非常感谢您对此事提出任何建议或想法！

Answer 1

如果你想在你的组件中定义 CSS，你确实需要 CSS-in-JS。

理论上，您可以像这样定义内联样式：

const style = {
  marginBottom: '0rem',
};

return <div style={style} />

但这并不能很好地扩展，所有样式都是内联的，并且您无法获得 CSS-in-JS 的所有好处，例如使用道具、主题、样式继承以及样式自动前缀的能力。

您在 pt 1 中尝试的示例实际上很有意义。

也许将全局类名与styled-components 混合不是绝对最佳的想法，所以如果你想全押styled-components，你可以定义一些样式仅在 styled-components 中，并一个接一个地继承它们，如下所示：

const Card = styled.div`
  /* Your card styles go here */
`;

const CardBody = styled(Card)`
  /* Your card body styles go here */
  /* (in your example you apply card and card-body to the same element, */
  /* so I assume card-body is a "variant" of card) */
`;

const Component = styled(CardBody)`
  margin-bottom: 0rem;
`;

return <Component />

这样，您的所有样式都由styled-components 管理，并且您不必担心全局样式会覆盖您在样式组件中编写的内容 - 因为Component 样式将比CardBody 更重要样式，而CardBody 样式将比Card 样式更重要。

Answer 2

到目前为止，我想出的最佳解决方案是在元素上使用 Emotion 及其 css-prop。 https://emotion.sh/docs/css-prop

这样我可以像 inline-css 一样编写代码，但最终结果是元素上的一个类，我认为这很整洁。

这是一个例子：

const styleEmployeeBox = css`border-right: black solid 1px;`
const bstyleCard = 'card';

...

return <div css={styleEmployeeBox} className={bstyleCard}>

检查元素告诉我：

<div class="card css-nrnevs-ComponentName">

我选择写这种css-in-js 是因为我看到我的团队中有很多开发人员在style 属性上编写内联样式——可能是因为他们很懒而且不想为小的特定修复添加一个 css 类。

---

如果它们是我不应该继续使用此解决方案的原因，我会很高兴听到这个消息。 :)

---