Skip to content

css 单独引用

css-module(不需要引入插件)

首先css必须是xxxx.module.css,jsx和css 必须在一个目录下

在jsx中引入:import style from './xxx.module.css';

使用:<div className={style['class名称']}></div>

classnames

第一步:npm i classnames -S

在jsx中引入:
    import style from './xxx.css';
    import classnames from 'classnames/bind'
    const cls=classnames.bind(style)

使用:<div className={cls('tab','tab1')}></div>

styled-components(他是用来创建组件的 )

第一步:npm i styled-components -S

在jsx中引入:
    import styled from 'styled-components'

使用:
    const MyTitle=styled.h1`border:1px solid red;text-align:center`;
    <div><MyTitle>标题</MyTitle></div>