当前位置: 首页 > 工具软件 > ReactCSS > 使用案例 >

React中使用css

钱承允
2023-12-01

内联样式

联样式是官方推荐的一种css样式的写法:

  1. style 接受一个采用小驼峰命名属性的 JavaScript 对象,,而不是 CSS 字符串;
  2. 并且可以引用state中的状态来设置相关的样式

问题:
(1)写法上都需要使用驼峰标识
(2)某些样式无法编写(比如伪类/伪元素)

export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      color: "purple"
    }
  }
  render() {
    const pStyle = {
      color: this.state.color,
      textDecoration: "underline"
    }
    return (
      <div>
        <h2 style={{fontSize: "50px", color: this.state.color}}>我是标题</h2>
        <p style={pStyle}>我是一段文字描述</p>
      </div>
    )
  }
}

普通的css

  1. 普通的css我们通常会编写到一个单独的文件,之后再进行引入

问题:
(1)普通的css都属于全局的css,样式之间会相互影响,会被层叠掉

import './style.css';
export default class App extends PureComponent {
  render() {
    return (
      <div id="app">
        <span>App</span>
        <h2 className="title">我是App的title</h2>
      </div>
    )
  }
}

.
css modules

React的脚手架已经内置了css modules的配置解决局部作用域的问题

  1. .css/.less/.scss 等样式文件都修改成
  2. xxx.module.less
  3. xxx.module.css
  4. xxx.module.scss 之后就可以引用并且进行使用了

问题
(1)引用的类名,不能使用连接符(.home-title),在JavaScript中是不识别的
(2)所有的className都必须使用{style.className} 的形式来编写
(3)不方便动态来修改某些样式,依然需要使用内联样式的方式

#app  .title {
  color: blue;
}
import appStyle from './style.module.css';
export default class App extends PureComponent {
  render() {
    return (
      <div id="app">
        App
        <h2 className={appStyle.title}>我是App的title</h2>
      </div>
    )
  }
}

CSS in JS 由第三方库提供

“CSS-in-JS” 是指一种模式,其中 CSS 由 JavaScript 生成而不是在外部文件中定义

目前比较流行的CSS-in-JS的库

  1. styled-components 最流行 安装 npm i styled-components
  2. emotion
  3. glamorous

styled-components

styled-components的本质是通过函数的调用,最终创建出一个组件:

  1. 这个组件会被自动添加上一个不重复的class
  2. styled-components会给该class添加相关的样式
  3. 支持直接子代选择器或后代选择器,并且直接编写样式
  4. 支持样式的继承
/**
 * 特点:
 *  1.props穿透  获取props需要通过${}传入一个插值函数,props会作为该函数的参数
 *  2.attrs的使用  可以通过attrs给标签绑定属性
 *  3.传入state作为props属性  可以获取到标签上和attrs配置对象上的属性
 */
import styled from 'styled-components'
import { HomeWrapper } from "./style"
const myInput = styled.input.attrs({
  placeholder: "coderwhy",
  bColor: "red"
})`
  background-color: lightblue;
  border-color: ${props => props.bColor};
  color: ${props => props.color};
`
const testInput = styled(myInput)`
	color: #fff;
  	background-color: green;
`
export default class Profile extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      color: "purple"
    }
  }
  render() {
    return (
      <div>
        <input type="password"/>
        <HYInput type="password" color={this.state.color}/>
      </div>
    )
  }
}

style.js 文件

import styled from 'styled-components';
// 可以导出多个
export const HomeWrapper = styled.div`
  font-size: 12px;
  color: red;
  .banner {
    background-color: blue;
    span {
      color: #fff;
      &.active {
        color: red;
      }
      &::after {
        content: "aaa"
      }
    }
  }
`
 类似资料: