我们应该在 React 风格的组件中使用 BEM(Block, Element, Modifier)

Question

我正在使用 React 风格的组件。我们应该在样式组件中使用 BEM(Block, Element, Modifier) 吗？如果是那么怎么办？

我试着给 ClassName 但它不起作用

import { SiteHeader } from './site-header';

export const SiteHeaderStyled = styled(SiteHeader).attrs({
 className: 'SiteHeader',
 })`
   &__nav {
     color: red;
   }
 `;

Answer 1

那是你自己的，你只能使用 styled-components 来定义每个需要样式的节点，或者你可以将两者混合使用：使用 styled-components + 内联样式，styled-components 用于组件容器 + 内部节点的类名（在样式容器中定义样式），甚至根据情况混合使用这 3 种方法。

在任何情况下，如果你坚持使用 styled-component，你就不需要 BEM，因为所有东西至少都只限于 1 个组件

编辑：对您的编辑的回应

什么不起作用？ SiteHeaderStyled (.SiteHeader) 或导航子项上的样式 ?

&__nav不能工作，因为没有parent（在scss代码部分），你必须这样包装：

export const SiteHeaderStyled = styled(SiteHeader).attrs({
 className: 'SiteHeader',
 })`
   .SiteHeader {
     &__nav {
       color: red;
     }
   }
 `;

使用上面的截图就来了 在任何情况下，如果它是一个到处都使用 styled-component 的项目，那么像这样的东西就足够了：

import { SiteHeader } from './site-header';

export const SiteHeaderStyled = styled(SiteHeader)`
   .nav {
     color: red;
   }
 `;

我们应该在 React 风格的组件中使用 BEM(Block, Element, Modifier)

Should we use BEM(Block, Element, Modifier) in react styled component

bem

reactjs

styled-components