Question

import React, { Component } from "react";
import './navbar.css'


class NavBar extends Component {




  render() {
    return (
      <div>

          navbar stuff



      </div>


    );
  }
}

export default NavBar;

如果我要将NavBar导入另一个文件并将其放置。

import React, { Component } from "react";
import NavBar from './NavBar'
import './randomfile.css'


class somefile extends Component {

  render() {
    return (
      <div id="test">

          <NavBar />


      </div>


    );
  }
}

export default somefile;

如何防止CSS影响我的导航栏？我正在尝试使用组件，但是当我只想要NavBar文件中包含的CSS时，就陷入了很多CSS的问题中。

randomfile.css

#test div {
    text-align: left;
}

^使div下的所有内容向左对齐

Answer 1

这取决于其他css文件的编写方式，例如它们是否使用非常通用的规则（例如元素匹配），因此无法阻止100％。但是，您可以使用来将影响降到最低。

按照样式http://getbem.com/遵循BEM，这样您的样式将更加紧凑，并且通常是针对您的组件的。
在样式库组件https://www.styled-components.com/之类的js库中使用css，这样，您的css规则将非常强大，通常足以统治外部的其他规则。

我以前曾经使用BEM，最近我在js中采用了css，最近在我的大多数项目中都使用了样式化的组件，并且效果很好。

React JS如何使组件不受CSS的影响？

1 个答案: