我们是否应该在React样式组件中使用BEM（块，元素，修饰符）

Question

我正在使用React样式组件。我们应该在样式组件中使用BEM（块，元素，修饰符）吗？如果是，那怎么样？

我试图给出className，但它不起作用

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

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

Answer 1

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

在每种情况下，如果您坚持使用样式组件，则不需要bem，因为至少一切都范围仅范围为1个组件

编辑：对您的编辑响应

什么是不起作用的？在SiteHeaderstyled（.SiteHeader）还是Nav Child上的样式？

＆amp; __ nav由于没有父母而无法工作（在SCSS代码部分中），您必须像这样包装它：

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

通过上述使用如屏幕截图
无论如何，如果这是您在各处使用样式组件的项目，那么类似的事情就应该足够了：

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

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