How css is used in React

React is widely used, so how does CSS work in React?

First, in-line styles are used

import React from 'react'
class Home extends React.Component {
  render() {
    return (
      <div>
        <h3 style={{fontColor: 'green',marginTop:'5px'}}>标题</h3>
      </div>) }
}
export default Home

Second, declare the use of styles

import React from 'react'
class Home extends React.Component {
  render() {
    const title = {
      fontColor: 'green',
      marginTop: '5px'
    }
    return (
      <div>
        <h3 style={tilte}>标题</h3>
      </div>) }
}
export default Home

Third, external introduction

import React from 'react';
import './Home.css';
class Home extends React.Component {
  render() {
 
    return (
      <div>
        <h3 className="title">标题</h3>
      </div>) }
}
export default Home

Four, Style Component

npm install --save styled-components

import React from 'react';
class Home extends React.Component {
  const Title = styled.h3`
    margin-top: 5px;
    font-color: green;
  `;
  render() {
    return (
      <div>
        <Title>标题</Title>
      </div>) }
}
export default Home
 

Six, Radium

import React from "react";
import Radium from 'radium';
let styles = {
  title: {
    color: 'green',
    marginTop: '5px'
    ':hover': {
      fontColor: '16px'
    }
  },
  info: {
    color: '#666'
  }
};
class Home extends Component { 
  render() {
    return (
     <div>
      <h3 style={[ styles.title, styles.info ]}>
        标题
      </h3>
     </div>
    );
  }
}
export default Radium(Home); 

That's all the editor-in-chief has to say about how css in React is used.