How to resolve style conflicts in react

Method to resolve style conflicts in react: First open the corresponding code file; then add the module name before the class name, for example, add the component name LoveVideo before the CSS class name of the entire component's style sheet.

The operating environment of this tutorial: windows7 system, react17.0.1 version, thinkpad t480 computer.

Recommended: "Javascript Basics Tutorial"

Resolving style conflicts in react

There are many needs in react development Things to pay attention to, in other words, there are many pitfalls that need to be stepped on. Here I will share a pitfall that I encountered, which is style conflict. This is a noteworthy problem. First, take a look at the example:

There are two components, one is called TestAComponent and the other is called TestBComponent. In the TestA component I wrote a button with a blue background color, and in TestB I wrote a button with a red background color.

TestAComponent Component A:

class TestAComponent extends React.Component {
  render() {
    return (
      <div>
        <button className="box">背景为蓝色</button>
      </div>
    );
  }
}

TestA css, the background is set to blue:

.box{
  font-size: 20px;
  margin: 10px;
  padding: 20px;
  background-color: blue;
  border-radius: 10px;
}

TestB Component B:

class TestBComponent extends React.Component {
  render() {
    return (
      <div>
        <button className="box">背景为红色</button>
      </div>
    );
  }
}

TestB css, the background is set is red:

.box{
  font-size: 20px;
  margin: 10px;
  padding: 20px;
  background-color: red;
  border-radius: 10px;
}

After writing the code, npm start, you will find that the effect displayed in the browser is like this:

Obviously two Different background colors are set for the buttons. Why is the actual display like this? This is where we analyze the style settings. The class name we set in the label is box. This is a common naming method used by many new front-end developers. However, setting the class names of labels of different components to the same name will cause style conflicts.

Method to solve this problem:

Add the module name before the class name. For example, if this component is called LoveVideo, add the component name LoveVideo before the CSS class name of the entire component's style sheet:

<div>
    <button className="LoveVideobox">TestA 背景为蓝色</button>  
</div>
.LoveVideobox{
  font-size: 20px;
  margin: 10px;
  padding: 20px;
  background-color: blue;
  border-radius: 10px;
}

Refresh the page after modification, and you will find that the problem of style conflict will be solved very well:

In addition to the conflicts caused by the same naming, there are also There is a situation where some global styles are set, such as:

html{
  background-color: #fff;
  font-size: 14px;
}
*{
  margin: 0;
  padding: 0;
  background-color: #fff;
  font-size: 14px;
}

Such global styles must not be set, because using react to make a single-page application has only one page. If global styles are set, The entire page will be loaded with this style.

Summary

1. Add the component name prefix to a single component class name. If the component is named LoveVideo, add this prefix to all style names

2. Do not set it Global common styles such as html{}, *{}

The above is the detailed content of How to resolve style conflicts in react. For more information, please follow other related articles on the PHP Chinese website!