09.样式的模块化

“Hello”组件文件夹内容

index.jsx

import React, { Component } from 'react';
// import './Hello.css'
import hello from './index.module.css'
// 样式也是可以做模块化的——给.css文件名字中间加上module
//注意：脚手架里使用import来引用样式，而不是使用link，并且.css后缀名也不能少
export default class Hello extends Component {
    render() {
        return (
            <div>
                {/* <h2 className="title">Hello</h2> */}
                <h2 className={ hello.title}>Hello</h2>
            </div>
        )
    }
}

index.module.css

.title{
    background-color: orange;
} 

“Welcome”组件文件夹内容

index.jsx

import React, { Component } from 'react';
// import './Welcome.css'
// import './index.css'
import welcome from './index.module.css'
// 如果你的css文件加了module关键词，你就可以这么玩了——不过样式的模块化用的不是特别多
//注意：脚手架里使用import来引用样式，而不是使用link，并且.css后缀名也不能少
export default class Welcome extends Component {
    render() {
        return (
            <div>
                {/* <h2 className="demo">Welcome</h2> */}
                <h2 className={welcome.title}>Welcome</h2>
            </div>
        )
    }
}

index.module.css

.title{
    background-color: skyblue;
}