React 使用样式

在React中使用样式

• 内联样式的写法

<h2 style={{fontSize: "20px"}}>我是标题</h2>

• 普通的css写法

// 注意: 这种样式属于全局样式,样式之间会相互层叠
import './App.css';
<h2 className="title">我是标题</h2>

• css modules

/**
 * 生成样式的class名唯一
 * React的脚手架已经内置了css modules的配置
 * 需要将 .css/.scss 等样式文件都修改成 .module.css/.module.scss
 */
import styles from "./App.module.css"
<h2 className={styles.title}>我是标题</h2>

• css in js (使用 styled-components 库)
  建议编译器安装相关代码提示插件，编写样式会更快
  安装：yarn add styled-components

import styled from "styled-components"

// 将 CssTestWrapper 标签替换成div标签
const CssTestWrapper = styled.div`
  color: red;
  h2{
    color:blue
  }
  // 支持类似scss的嵌套写法
  ul{
    border: 2px solid black;
    margin: 0;
    padding: 0;
    li{
    list-style: none;
      background:yellow;
      color: blueviolet;
    }
    // 支持伪类选择器
    li:hover{
      font-size: 60px;
    }
  }
  .input{
    width: 200px;
    height: 30px;
    // 获取props
    border: 10px solid ${props => props.inputBorder};
  }
`
// 添加 attrs属性
const OInput = styled.input.attrs({
  type:"password",
  placeholder:"请输入密码"
})`
border-bottom: 2px solid #ff5757;
padding: 0 20px;
`

// 样式继承 OInput2 继承 OInput的全部样式
const OInput2 = styled(OInput)`
color: #ff5757;
`

render() {
    return (
      <CssTestWrapper inputBorder="#f00">
        <h2>我是标题</h2>
        <div>我是内容</div>
        <ul>
          <li>我是列表1</li>
          <li>我是列表2</li>
        </ul>
        <input className='input'}></input>
        <br/>
        <OInput />
        <OInput2 />

      </CssTestWrapper>
    )
  }

classnames库

• 用于动态添加类名的一个库
  安装：yarn add classnames

import cn from "classnames"
// 使用
<input className={cn('input')}></input>

/**
 classNames('foo', { bar: true }); // => 'foo bar'
 classNames({ foo: true }, { bar: true }); // => 'foo bar'
 classNames({ foo: true, bar: true }); // => 'foo bar'
 classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
 */