SoFunction
Updated on 2025-04-07

3 ways to use external styles in React (summary)

1. Understanding about css-in-js

1. css-in-js is a css processing solution that uses js to write css styles. There are many implementation solutions, such asstyled-components、polished、glamorous(paypal is open source, no longer maintained), radium, emotion, etc.

2. The most mature ones are styled-components and emotion. They truly implement componentized styles, which can be said to be specially created for react.

2. Introduction to styled-components

styled-componentsIt is the mainstream implementation solution of css-in-js, and it is also the mainstream implementation solution of componentized style.

Here are some features of styled-components:

1. Unique class name: similar to css-module, generates a unique class name to avoid duplication and global pollution, and does not require you to think about how to name it.

2. No redundant css code: its style is bound to the component, and the style works when component calls it. Meaning you don't need to care about how to detect and delete unused css code.

3. Dynamic style: It can easily adjust and expand the style of components without creating many class classes to maintain the style of components.

4. Automatically add compatible prefix: Similar to Autoprefixer, browser compatible prefix will be automatically added to support older browsers.

5. Support variables and inheritance: You can use variables to set different styles. When using these different styles, you only need to pass one parameter to the style component.

3. How to use styled-components

1. Installation

npm install styled-components

2. Use

styled-components is mainly based on the tag template syntax of es6.

import React, { Component } from 'react'
import styled from 'styled-components'

export default class Style extends Component {
 render() {
  return (
   <>
    <div>
     <Title>I'm the title</Title>
    </div>
   </>
  )
 }
}

// Use the template string of es6 (the following indicates that the style of h1 is defined)const Title = styled.h1`
 font-size: 20px;
 color: #f00;

3. Nested usage

import React, { Component } from 'react'
import styled from 'styled-components'

export default class Style extends Component {
 render() {
  return (
   <>
    <div>
     <Content>
      <h2>Hello</h2>
      <div className="content">I'm content</div>
     </Content>
    </div>
   </>
  )
 }
}

const Content = `
 width: 100%;
 height: 500px;
 border: 1px solid #f00;
 > h2 {
  color: pink;
 }
 > .content {
  text-align: center;
  color: #f00;
 }
`

4. How to pass parameters using props

import React, { Component } from 'react'
import styled, { css } from 'styled-components'

export default class Style2 extends Component {
 render() {
  return (
   <div>
    <Button> submit </Button>
    <Button primary> submit </Button>
   </div>
  )
 }
}

const Button = `
 font-size: 1em;
 margin: 1em;
 padding: 0.25em 1em;
 border-radius: 5px;
 color: palevioletred;
 border: 2px solid palevioletred;
 cursor: pointer;

 ${props =>
   &&
  css`
   border: 2px solid mediumseagreen;
   color: mediumseagreen;
  `}
`

5. Inheritance of styles

import React, { Component } from 'react'
import styled from 'styled-components'

export default class Style3 extends Component {
 render() {
  return (
   <div>
    <Button> submit </Button>
    <ExtendingButton> submit </ExtendingButton>
   </div>
  )
 }
}

const Button = `
 background: palevioletred;
 color: white;
`

const ExtendingButton = styled(Button)`
 font-size: 18px;
 padding: 5px 25px;
`

4. Use sass

Projects created using create-react-app support sass but need to be installed by yourself

1. Installation

npm install node-sass

2. Use directly

import React, { Component } from 'react'
import './'

export default class Style4 extends Component {
 render() {
  return (
   <div>
    <div className="title">I'm the title</div>
   </div>
  )
 }
}

5. Use css-module

Projects created with create-react-app support css-module by default

1. The style file must be named in the form of [name]. or [name].

2. Import style files in the form of variables, such as import styles from './';

3. className is added as a variable reference, such as className={ }

import React, { Component } from 'react'
import styles from './'

export default class Style5 extends Component {
 render() {
  return (
   <div>
    <div className={}>I'm the title</div>
   </div>
  )
 }
}
<div class="Style5_title__lsl4D"></div>

4. If you don't want to use the default hash value

:global(.wrap) {
 color: green;
}
// Use directly<h2 className="wrap">Hello</h2>

5. Inheritance of styles

.className {
 color: green;
 background: red;
}

.otherClassName {
 composes: className; // Directly inherit the above color: yellow;
}

.title {
 composes: className from './'; // Use external stylesheets directly color: red;
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.