如何在 React 的 SCSS 模块中设置子元素的样式？

Question

假设我在 React 中有以下组件：

import classNames from 'classnames';
import style from './Cat.module.scss';

export default function Cat({ src, alt, bio, disclaimer, className }) {
    return (
        <div className={classNames(
            style.container,
            className,
        )}>
            <img
                src={src}
                alt={alt}
            />
            <p className={style.bio}>
                {bio}
            </p>
            <p className={style.disclaimer}>
                {disclaimer}
            </p>
        </div>
    );
};

现在，让我们在页面组件上使用这个Cat 组件：

import style from './GarfieldPage.module.scss';

export default function GarfieldPage() {
    return (
        <>
            <h1>This is my cat!</h1>
            <Cat
                src="garfield.png"
                alt="Garfield"
                bio="The best cat ever!"
                disclaimer="Loves lasagna"
                className={style.garfield}
            />
        </>
    );
};

我想对 bio 应用一些自定义样式。有几种方法可以做到这一点，我个人觉得它们很友好：

1. 使用data- 属性来标记元素以便于访问，所以在我的Cat 组件中它会变成：

<p className={style.bio} data-bio>

然后在我的页面组件的样式中：

.garfield [data-bio] {
    color: purple;
}

1. 从其他 SCSS 模块导入类名。这可能是最“正确”的方法，但听起来像是很多进口。

2. 允许类名作为每个元素的道具：

export default function Cat({
    src,
    alt,
    bio,
    disclaimer,
    className,
    bioClassName,
    disclaimerClassName,
}) {
    return (
        <div className={classNames(
            style.container,
            className,
        )}>
            <img
                src={src}
                alt={alt}
            />
            <p className={classNames(
                style.bio,
                bioClassName,
            )}>
                {bio}
            </p>
            <p className={classNames(
                style.disclaimer,
                disclaimerClassName,
            )}>
                {disclaimer}
            </p>
        </div>
    );
};

听起来像一个道具地狱，尤其是当组件很大时。

4. 使用 CSS 匹配运算符：

.garfield [class~=bio] {
    color: purple;
}

我不喜欢那个，因为可能会有名字冲突。

5. 假设我的 SCSS 中有组件树：

.garfield p:last-child {
    color: purple;
}

假设该组件不会改变他们的树听起来是个坏主意。

是否有任何公认的模式来设置模块中子元素的样式？我错过了更好的方法吗？

Answer 1

您也可以使用:global。

你会这样做：

.garfield :global(.bio) {
    color: purple;
}

一个工作的demo。

我不能说它比你提到的方法更好，这取决于具体情况。 :global 在你想要覆盖来自包的组件样式时特别有用，但它不允许你通过 props 这样做。