css - 使用 CSS 模块时从父项覆盖样式的 'correct' 方法是什么？

Question

我正在使用 NextJS 和 CSS 模块来管理样式。

我想在以下情况下修改组件的外观:

1. 正常呈现在页面上，使用 props 为 className 指定修饰符。
2. 在特定的父组件中呈现
3. 在特定的父组件中呈现为 props.children。

对于上述所有问题，我都有一个可行的解决方案，但我想知道这些技术中的任何一种是否被认为是不好的做法，或者是否有更好的替代方案我应该考虑(特别是对于场景 3)。

以一个简单的Button组件为例:

场景 1:

按钮.模块.scss

.button {
   color: 'black';
}

.red {
   color: 'red';
}

.blue {
   color: 'blue';
}

按钮.jsx

import styles from './button.module.scss';

const Button = (props) => {

   const classNames = [styles.button];

   props.modifiers.map((modifier) => {
      classNames.push(styles[modifier]);
   });

   return (
      <button className={classNames.join(' ')}>{props.text}</button>
   );
}

export default Button;

页面.jsx

<Button text={`Test`}/>
<Button text={`Test`} modifiers={[`red`]}/>
<Button text={`Test`} blue={[`red`]}//>

场景 2:

这一次，当 Button 组件出现在 ParentComponent 中时，我需要更改它的样式(有时与之前的技术结合使用)。

父组件.module.scss

.button {
   background-color: 'green';
}

ParentComponent.jsx

import styles from './parent-component.module.scss';
import Button from 'components/button/Button.jsx';

const ParentComponent = (props) => {
   return (
      <>
         <Button text={`Test`} modifiers={[styles.button}>
         <Button text={`Test`} modifiers={[`red`, styles.button]}>
      </>
   );
}

Button.jsx 必须更新以处理此问题

props.modifiers.map((modifier) => {
   // The modifier doesn't exist in the local styles, so we apply it directly
   classNames.push(styles[modifier] || modifier);
});

场景 3:

ParentComponent.jsx

import styles from './parent-component.module.scss';

const ParentComponent = (props) => {
   return (
      <div>{props.children}</div>
   );
}

// Expose styles on the exported component, so we can refer to it in page.jsx
ParentComponent.styles = styles;

export default ParentComponent;

页面.jsx

<ParentComponent>
   <Button text={`Test`} modifiers={[ParentComponent.styles.button]}>
</ParentComponent>

我来自 BEM 背景，我通常会使用类似这样的东西来解决这个问题:(来源 https://css-tricks.com/using-sass-control-scope-bem-naming/)

.component {
  $self: &;
  display: block;
  max-width: 30rem;
  min-height: 30rem;
  
  &--reversed {
    background: white;
    border-color: lightgray;
    
    // Here, we use $self to get the correct scope
    #{ $self }__child-element {
      background: rebeccapurple;
    }
  }
}

感谢任何建议。

Answer 1

使用 npm 包类名。