How to add css style to react

Adding method: 1. Use "style={{style code}}" to define the css style inside the component; 2. First create a style style object, and then use "style={{ in the component of the render function Object}" statement reference; 3. Use "import 'css file path'" to introduce external css files.

The operating environment of this tutorial: windows7 system, react16 version, Dell G3 computer.

Related tutorial recommendations: React video tutorial

Compared with the three methods of referencing css in HTML, there are also three methods in react, one by one:

1. Inline style: directly defined inside the component

Inline style is the most basic way of writing, which is like the inline style we wrote when we first learned HTML. The usage of

in JSX may be less common in projects:

class App extends React.Component {
  // ...
  render() {
    return (
      <div style={{ background: &#39;#eee&#39;, width: &#39;200px&#39;, height: &#39;200px&#39;}}>
        <p style= {{color:&#39;red&#39;, fontSize:&#39;40px&#39;}}>Second Way!</p>
      </div>
    )
  }
}

It should be noted that the css style name here uses camel case naming: such as font-size → fontSize, And you need to put CSS properties between double curly braces. Why use two braces? Because JS expressions are rendered in JSX, they must be enclosed in a pair of curly braces, {style} can be treated as a JS object. So the first pair of braces puts the JS expression into JSX parsing, and the pair of braces inside creates a style object instance, so here style is passed into the component as an object

2. Declaration style:

Declaration style is actually an improved way of writing inline style. Create a style object outside the render function and then pass it to the component to separate the css from the label, but in fact the style If there are more, it still won’t look good.

class App extends React.Component {
 
//...
 
 const style1={    
      background:'#eee',
      width:'200px',
      height:'200px'
    }
 
  const style2={    
      color:'red',
      fontSize:'40px'
    }
 
  render() {
    return (
      <div style={style1}>
        <p style= {style2}>Second Way!</p>
      </div>
    )
  }
}

Note that the practical naming method here is still camel case. Secondly, because the style object has been declared externally, only one curly bracket is needed when using it in JSX {//.. }

3. Introduce styles: Introduce external css files. The external css files are ordinary css. Use the following statement after the import statement in the component js.

Introducing a style means writing the CSS file externally, and then importing it for use. This ordinary imported style will actually have certain problems. Let’s look at the usage first, and then analyze the problem.

Usage:

css file

.person{
    width: 60%;
    margin:16px auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding:16px;
    text-align: center;
}

js file

import React from 'react';
import './Person.css';
class App extends React.Component {
 
  //....  
 
  render() {
 
    return (
      <div className=&#39;person&#39;>
        <p>person:Hello world</p>
      </div> 
    )
  }
}
 
export default App;

Result display:

##Question:

Because CSS rules are global, the style rules of any component are effective for the entire page, which may lead to a large number of conflicts. That is to say, if I have two css files and some of the style names in them are the same, they will be overwritten. The simple solution is to make the naming of the styles complex and non-repetitive, but this way there are too many styles. It's hard to avoid duplication, and the naming doesn't look too good.

For more programming-related knowledge, please visit:

Programming Teaching! !

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