SoFunction
Updated on 2025-04-02

Several ways and application summary of React introduces css

1. Directly import css file

import "./"

2. Introduce the css module to define the file name [component name.]; this method can avoid duplication of class names. Each component has an independent scope, avoid global pollution, and ensure the uniqueness of class names.

import styles from "./"
.title{
    color: red;
}
<h2 className={} style={{ background:'pink' }}>I'm the parent component</h2>

3. Third-party dependency library styled-components, you need to download the third-party dependency library to define the style of each component.

Download the dependency library directive: npm install styled-components -S

import styleComponents from "styled-components"
// Custom style components. Pay attention to the capitalization of the first letter of the definition, otherwise it will not take effect.const StyleP = `
    color: green;
    font-size: 30px;
    font-weight: bolder;
`
const StyleTitle = styleComponents.h1`
    color: red
`
<StyleTitle>Introducing third-party librarycss demo</StyleTitle>
<StyleP>Introducing third-party librarycss demo</StyleP>

4. Application

(1) Pass parameters; bind parameters on component labels, obtain and operate parameters through arrow functions

const Wrapper = `
    width: ${props => };
    height: ${({wrapperHeight}) =>parseInt(wrapperHeight)/2 + 'px'};
    background: red;
`
<Wrapper wrapperWidth="200px" wrapperHeight="100px"></Wrapper>

(2) Inheritance; call styled to inherit the style attributes of the parent component

const ParentItem = `
    display: block;
    color: yellow;
    text-align: center;
    line-height: 1.5;
    font-size: 20px;
`
const Item = styled(ParentItem)`
    color: blue;
    font-size: 16px;
    &amp;:nth-child(2n-1){
        background: #00ffe4;
    }
`
&lt;ParentItem style={{color: 'red'}}&gt;Jiang Hudong&lt;/ParentItem&gt;
&lt;Item&gt;All come to Xi&lt;/Item&gt;
&lt;Item style={{color: '#fff'}}&gt;Zheng Jiuyuan&lt;/Item&gt;

(3) Operate the style attributes of the styled component; attributes can be defined on the component label, or attributes can be defined through attrs

const UserInput = `
    display: block;
    width: 500px;
`
// Define attributes through attrconst PasswordInput = (({ type, placeholder }) =&gt; ({ 
    type: type ? type : 'text',
    placeholder: placeholder || 'Please enter'
}))`
    display: block;
`
username：&lt;UserInput value={} type="text" placeholder="Please enter a username"&gt;&lt;/UserInput&gt;
user：&lt;PasswordInput value={}&gt;&lt;/PasswordInput&gt;
{/* Define attributes on component tags */}
password：&lt;PasswordInput value={} type="password" placeholder="Please enter your password"&gt;&lt;/PasswordInput&gt;

This is the article about several ways to introduce css and applications of React. For more related content on introducing css, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!