Question

我有一个具有className的React组件，该组件导入一个样式表以应用于它。然后，当使用该组件时，我给它一个className，以便使用导入到使用位置的不同样式表再次对其进行样式设置。

我曾经尝试使用ID，但不走运。我已经浏览过开发人员工具，而第二个样式表根本没有应用。

这是Button.js

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

export default (props) => {
    return(
        <div className='button'>
            <button>{props.name}</button>
        </div>
    )
}

button.scss

.button {
    button {
        border: 1px solid black;
        background-color: white;
        padding: 0.5em;
        font-family: inherit;
    }
}

现在实际使用时

import '../styles/navbar.scss';
<Button name='Cart' className='navbar cartButton'/>

navbar.scss

.navbar {
    .cartButton {
        color: red;
    }
}

例如，红色不会被应用

Answer 1

className只能像您期望的那样在<div>这样的本地html元素上正常工作。

要传递className，您需要执行以下操作：

export default (props) => {
    return(
        <div className={'button ' + props.className}>
            <button>{props.name}</button>
        </div>
    )
}

之后，您需要找到正确的CSS查询。

Answer 2

将scss更改为

.navbar {
    &.cartButton {
        color: red;
    }
}

或

.navbar.cartButton {
        color: red;
    }

如何将2个不同的样式表应用于一个React组件？

2 个答案: