Front-end CSS 的几种处理方式

[lidongyangLeo]

• 行内样式和类样式
  • 行内样式 style={} 里面要传入一个对象，可以直接写入一个对象。
  • 样式文件， 用import 导入样式文件，在标签上添加className属性。
• 模块化样式 新建后缀名为.moudle.css的样式文件，例如新建common.module.css的样式文件

common.moudle.css

.success {
  color：green;
  font-size: 20px;
}

.error {
  color:red;
  font-size: 20px;
}

使用的时候，通过import 导入样式文件，通过文件名[属性]来使用这个样式。

import common from "./common.moudle.css";

<span className={common.success}></span>

• 动态切换样式 通过classNames 插件来完成。

common.moudle.css

.success {
  color：green;
  font-size: 20px;
}

.error {
  color:red;
  font-size: 20px;
}

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames/bind';
import styles from './common.css'

let cx = classNames.bind(styles); //建立绑定关系

class Box extends Component {
  render() {
    let names = cx({    //声明样式对象
      success:true,
      error:this.props.error    //从标签属性中读取传过来的值
    })
    return (
      <div>
        <h1 className={names}>这是提示信息</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <Box  error={false} />,
  document.getElementById('root')
);

• CSS in JS

使用 styled-components插件

//common.js 样式文件
import styled from 'styled-components'

//这种定义的写法类似于 <div class="Container"></div>
const Container = styled.div`
    width:500px;
    height:500px;
    background:${(props)=>props.color};
    font-size:30px;
    h1 {
      font-size:50px;
    }
`
export {
  Container
}

import React, { Component } from 'react';
import {Container} from './common'

class Box extends Component {
  render() {
    return (
      <Container color="red">
        <h1> hello world</h1>
        这里是内容
      </Container>
    );
  }
}

ReactDOM.render(
    <Box />,
  document.getElementById('root')
);