Because of the JSX syntax of React, there are many ways to use styles in React. Here are five common ways to use CSS styles in React. CSS Modules and Styled Components are recommended.

Inline style

Inline style is the most basic way to write inline style in HTML:

class App extends React.Component {
  // ...
  render() {
    return (
      <div style={{ background: '#eee', width: '200px', height: '200px'}} >
        <p style= {{color:'red', fontSize:'40px'}} >Inline style</p>
      </div>)}}Copy the code

Note that the CSS style names are humped: font size →fontSize, and the CSS properties need to be placed between double braces.

The statement style

Declarative styles are an improved version of inline styles, creating style objects outside the Render function and passing them to components to keep CSS separate from tags.

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}>Inline style</p>
      </div>
​
    )
  }
}
Copy the code

Note that the hump nomenclature is still in use, and since the style object is already declared externally, only a curly brace {} is needed to use it in JSX.

The introduction of the style

Importing styles means writing out CSS files and importing them.

The CSS file

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

Js file

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

Because CSS rules are global, style rules for any one component are valid for the entire page, which can lead to a lot of conflicts. This means that if you have two CSS files with the same style names, they will be overwritten. The simple solution is to make the style names complex and non-repetitive.

CSS Modules

CSS Modules implement the local scope of CSS by configuring.css files to be compiled so that the names of the CSS classes are unique to each component that uses CSS.

Create-react-app2.0 and above CSS Modules

Local style

Naming rule: xxx.module.css

// Import mode
import xxx from 'xxx.module.css'
/ / usage
<div className={xxx.styleName}>
Copy the code

Global style

Naming rule: xxx.css

// Import mode
import'XXX. CSS'/ / usage
<div className='styleName'>
Copy the code

Mix global and local styles:

person.module.css

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

person.js

import React, { Component } from 'react';
​
// Local style
import styles from './Person.module.css';
​
// Global style
import '.. /App.css'
class App extends Component {
​
  render() {
​
    return (
      <div className={styles.person}>
        <p className='fz'>person:Hello world</p>
      </div>)}}export default App;
Copy the code

Styled-component

With the advent of componentization era, front-end applications begin to encapsulate CSS from the component level: that is, declare and abstract styles through JS to improve the maintainability of components; Dynamic loading style at component loading time, dynamically generating class names to avoid global contamination. Styled Component Declares styles as components, making styles also components, separating logical and presentation components.

Styled Component, as a third-party library of React, is an excellent practice and representative of CSS in JS. Styled Component, written in JS, can achieve logic complexity, function methods, reuse and interference avoidance that are difficult to handle in conventional CSS. Style writing will be directly attached to JSX, HTML, CSS and JS will be cohesive again, and semantic tag representation of H5 will also be realized.

The installation

npm install --save styled-components
Copy the code

use

// Create a Title component that will render an attached 
 tag

const Title = styled.h1` the font - size: 1.5 em. text-align: center; color: palevioletred; `;
​
// Create a Wrapper component that will render a styled 
      

        tag
      

const Wrapper = styled.section` padding: 4em; background: papayawhip; `;
​
// Use Title and Wrapper just as you would use the regular React component
render(
  <Wrapper>
​
    <Title>
      Hello World!
    </Title>
​
  </Wrapper>
);
Copy the code