零经验学 react 的第9天 - 样式文件 scoped

让 某个css 文件只作用当前文件，有三种方式：css module、classname 第三方库、styled第三方库

1、css module 方式

• 创建 test.js,且同级创建 test.module.css 文件（注意css的文件命名一定是 xxx.module.css）
• test.js 中引入 test.module.css文件 import styles from './test.module.css'
• test.js 中的元素使用 test.module.css 文件中的样式 <div className={styles['test-box']}>test

js

import styles from './test.module.css';

function Test() {
    return (
        <div className={styles.testBox}>
            <p>test page</p>
            {/* 多个类名使用 反字符串 拼接方式 */}
            <div className={`${styles['test-box']} ${styles['div1']}`}>
            This is a test box
            </div>
        </div>
    )
}

export default Test;

css

/* test.module.css */
.test-box {
    color: #f00;
}
.div1 {
    font-size: 40px;
}

2、classname 第三方库

• 安装 classnames npm instll classnames
• test.js 中引入 test.module.css文件 import styles from './test.module.css'
• test.js 中引入 classnames/bind 库 import classnames from 'classnames/bind';
• test.js 中绑定样式对象 const classNames = classnames.bind(styles);
• test.js 中使用 <div className={classNames('test-box', 'div1')}>div

css

/* test.module.css */
.test-box {
    color: #f00;
}
.div1 {
    font-size: 40px;
}

js

// 使用 classnames/bind 绑定 CSS 模块样式
import styles from './test1.module.css'; // step1: 引入 CSS 模块样式,注意文件的命名一定是 xxx.module.css
import classnames from 'classnames/bind'; // step2: 引入 classnames/bind 库
const classNames = classnames.bind(styles); // step3: 绑定样式对象


function Test1() {
    return (
        // step4: 使用绑定后的 classNames 方法来应用样式
        <div className={classNames('test-box')}>
            <p>test page</p>
            <div className={classNames('test-box', 'div1')}>
                This is a test box
            </div>
        </div>
    )
}

export default Test1;

3、styled 第三方库 (创建自带样式的组件)

• 安装 npm install styled-components
• test2.js 中引入 styled-components
• test2.js 中 创建自带样式的组件

js

import styled from 'styled-components'

function Test2() {
    return (
        <div>
            test2 page
            {/* 使用 styled-components 定义一个样式化的组件 */}
            <StyledDiv>
                Hello, styled-components!
            </StyledDiv>
            <AnotherStyledDiv>
                This is another styled component extending the first one.
            </AnotherStyledDiv>
        </div>
    )
}
const StyledDiv = styled.div`
    color: red;
    font-size: 24px;
`
const AnotherStyledDiv = styled(StyledDiv)`
    background-color: lightgray;
    padding: 12px;
    font-size: 10px;
`
export default Test2;