将CSS样式表仅应用于活动组件

Question

我正在开发一个ReactJS应用程序，应用程序顶部有一个标题，左侧有菜单，中间的“框架”是加载路由及其对应组件的地方。我希望能够仅在加载特定组件时应用CSS样式表。同时，我不希望样式表一直应用于顶部标题或左侧菜单。

我的期望是，将import 'custom.css';添加到特定组件中时，样式表的样式仅适用于该组件及其子组件，而且仅在路由激活时才生效。但实际情况是，即使路由/组件未加载，它也会应用于整个页面。

我了解到另一种替代方法是使用Styled Components。但对于我的用例，设计公司提供了一份样式表（应保持不变），我们需要仅在我正在工作的子模块中使用该样式表，并且不希望其样式影响应用程序的其余部分。

如何让一个样式表仅适用于某个特定的路由/组件？

- mellis481

Answer 1

如果您希望仅在组件挂载时应用，请使用生命周期。下面的示例基于您正在使用sass、React、sass-node和webpack中的加载器。

<pre>
import React from 'react';
import './styles.scss';

class MyComponent {
 constructor(props) {
   super(props);
   this.state = { className: '' }
 }

 componentDidMount() {
  this.setState({
    className: 'myOwnClass'
   });
  }
  render(){
    return (
    <div className={this.state.className}>This is a example</div>
   );
  }
}

export default myComponent;
</pre>

- Cesar Casas

Answer 2

使用简单的CSS技巧。假设您有两个具有不同CSS文件的组件（比如about.css和contact.css）。现在考虑您的两个CSS文件都有一个共同的类，但具有不同的样式属性，例如：

about.css

.container{
    max-width: 400px;
}

contact.css

.container{
    max-width: 500px;
}

在ReactJS中，两个CSS文件将同时加载并覆盖其中一个样式。为了解决这个问题，需要添加类来区分这些样式，例如：

about.css

.about-component.container{
    max-width: 400px;
}

contact.css

.contact-component.container{
    max-width: 500px;
}

- Anirudha Mahadik

---

考虑到样式表是不可更改的。 - mellis481

我认为这对于单页应用程序可能不起作用，但如果您正在设计多页应用程序，则可以使用CSS样式的基本方法。 - Anirudha Mahadik

Answer 3

为了只在需要时调用特定的CSS，您可以使用CSS模块。您可能需要更新您的React版本。

保存CSS文件时，请使用“.module.css”进行保存，例如“styles.module.css”。这些文件中的CSS只能被导入它们的组件使用和访问。正如W3Schools教程中所述。

假设这是您在styles.module.css中的CSS代码：

.container {
  color: white;
}
.cont-child {
  background-color: red;
}

然后在您的JS文件中，如果JS和CSS文件在同一个目录中，您可以像这样导入CSS文件。确保您指向正确的路径。

import styles from './styles.module.css'

在你的HTML部分，你可以这样使用它：

class Home extends React.Component {
  render() {
    return(
      <main className={ styles.container } >
        <div className={ styles["cont-child"]} >
          Some div text about something...
        </div>
      </main>
    );
  }
}

我目前使用两种访问选择器的方式，因为styles变量像一个对象一样。我把它们都放在这里，因为第二个选项能够获取命名为“btn-active”的选择器，而这在某些情况下非常有用。虽然骆驼式命名被认为更加清晰。

请注意：我最初将此答案发布为回复类似问题的答案 {{link2：React CSS-如何仅将CSS应用于特定页面}}。

- Wylie

Answer 4

我想要能够在特定组件加载时仅应用CSS样式表。

为什么不通过React.js内联应用样式呢？

---

步骤1。 为组件创建样式对象：

var componentOneStyle = {
  color: 'white',
  backgroundColor: 'red'
};

步骤2. 使用样式对象填充组件的style属性：

ReactDOM.render(<div style={componentOneStyle}>This is Component One</div>, mountNode);

- Rounin

---

正如我在问题中提到的，我知道使用styled-components来为React应用程序设置样式的方法。但在我的情况下，我从设计师那里收到了一个样式表，我不想做的事情不多，只是导入样式表，因为设计师将来可能会更改它，手动更新所有更改的回归问题将是一场噩梦。 - mellis481