Question

我正在开发一个ReactJS应用程序，该应用程序的顶部有一个标题，左边是一个菜单，中间的“框架”是路由及其相应组件的加载位置。我希望仅在加载特定组件时才能将CSS样式表应用于它们。我也不希望他们一直应用到顶部标题或左侧菜单。

我的期望是，将Code ... RecommendedPack --------------------------- KBOS 2 KLAX 1 KSFO 4 KSMO 6添加到特定组件将仅将样式表的样式应用于该组件，并且在激活路线时将其作为子组件。而是将其应用于整个页面，即使未加载路由/组件也是如此。

我知道样式组件是一种替代方法，但是对于我的用例，设计公司正在提供一个样式表（应该保持不变），我们只需要为正在处理的子模块使用该样式表即可我不希望它的样式影响应用程序的其余部分。

如何将样式表仅应用于活动的路径/组件？

Answer 1

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

about.css

RowDataPacket {
      id: 1,
      name: null,
      extract: null,
      icon_image: null,
      title: 'Product1',
      permalink_slug: 'product1',
      content: '<p>How can you two... Don\'t Google the question, Moss! Yeah, you need to turn it on... uh, the button turns it on. So, remember the new number! 0118 999! 88199, 9119 725! ... 3! Yeah, you need to turn it on... uh, the button turns it on. Hello? I\'ve had a bit of a tumble. Dear Sir stroke Madam, I am writing to inform you of a fire which has broken out at the premises of...</p>',
      author_id: 1,
      tags: '',
      last_modified_date: 2018-07-09T09:47:09.000Z,
      publish_date: 2018-07-06T08:30:12.000Z,
      status: 'published',
      feature_image: 33,
      product_image: '49',
      product_href: null,
      undefined: null,
      product_link: 'https://bbc.co.uk, https://google.com',
      link_title: 'Discover more, Learn More',
      authorName: 'Admin',
      site_url: 'http://localhost:3000',
      poster: 
       { link: [ 'https://bbc.co.uk', ' https://google.com' ],
         title: [ 'Discover more', ' Learn More' ] } }

contact.css

.container{
    max-width: 400px;
}

是的，在ReactJS中，两个CSS文件将同时加载，并将覆盖任何一种样式。因此，要解决此问题，请添加类来区分这种样式，例如：

about.css

.container{
    max-width: 500px;
}

contact.css

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

Answer 2

我希望能够将CSS样式表应用于特定组件仅当它们被加载时。

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

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

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

第2步。 用样式对象填充组件的style属性：

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

Answer 3

如果只想在安装组件时应用，则可以使用生命周期。以下示例基于您正在使用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>

Answer 4

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

当保存你的 CSS 文件时，用“.module.css”保存它，例如。 “styles.module.css”。这些文件中的 CSS 只能由导入它们的 hte 组件使用和访问。 As stated in a tutorial from 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>
    );
  }
}

我目前使用两种方式来访问选择器，因为样式变量就像一个对象。我把它们都放在这里是因为第二个选项能够获取名为“btn-active”的选择器。这在某些情况下会派上用场。 Camelcasing is considered cleaner though。

请注意：我最初发布此答案是作为对类似问题的回复React CSS - how to apply CSS to specific pages only

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

4 个答案: