Css 将全局类名与特定于组件的样式相结合

我正在构建一个设计系统，我把重点放在架构上——我希望它是一个良好的开发者体验

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

我有一个想法，像这样：

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

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

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

但我觉得这有点笨拙

React Bootstrap

将是一个解决方案，但我认为我通常会添加额外的类名，所以我不会将其抽象掉

前

从'react bootstrap'导入{Card}
const componentSpecificStyle=`页边距底部：0rem`
返回

或者类似的东西。。。但是正如我所说的，如果我想在上面添加另一个类名呢？然后我们用三种不同的方式设计样式，

react bootstrap

、inlineish

style

和

className

问题: 我是否让它变得不必要的复杂

---

非常感谢您对此事的任何建议或想法

如果您想在组件中定义CSS，您确实需要JS中的CSS

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

const style={
marginBottom:“0rem”，
};
返回

但这并不能很好地扩展，所有的样式都是内联的，而且你并没有得到JS中CSS的所有好处，比如能够使用道具、主题、样式继承，以及让你的样式自动重新引用

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

也许将全局类名与

样式化组件混用并不是最好的主意，因此，如果您想完全使用
样式化组件
，您可以仅在
样式化组件
中定义一些样式集，并将它们一个接一个地继承，如下所示：

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 />

const Card=styled.div`
/*你的卡片样式在这里*/
`;
const CardBody=样式化（卡片）`
/*你的卡片主体样式在这里*/
/*（在您的示例中，将卡和卡体应用于同一元素*/
/*所以我假设卡片主体是卡片的“变体”）*/
`;
const Component=样式化（CardBody）`
边缘底部：0rem；
`;
返回

这样，所有样式都由
styled components
管理，您不必担心全局样式会覆盖您在styled components中编写的内容，因为
Component
样式比
CardBody
样式更重要，而
CardBody
样式将比
Card
样式更重要。
到目前为止，我提出的最佳解决方案是使用
情感
及其css道具元素

这样我可以像内联css一样编写代码，但最终的结果是元素上有一个类，我认为这很好

下面是一个例子：

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

...

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

constyleemployeebox=css`右边框：黑色实心1px`
const bstyleCard='card'；
...
返回

检查该元素会显示：

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



在js

中编写这种

css是我选择的，因为我看到我的团队中有很多开发人员在
style
prop上编写内联样式——可能是因为他们很懒，不想为特定的小补丁添加css类


如果它们是我不应该继续使用此解决方案的原因，我很高兴听到它。：）

这是一个很好的答案
const styleEmployeeBox = css`border-right: black solid 1px;`
const bstyleCard = 'card';

...

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

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