React编写CSS方式

1. css modules

css modules并不是React特有的解决方案,而是所有使用了类似于 webpack配置的环境 下都可以使用的。
如果在其他项目中使用它,那么我们需要自己来进行配置,比如 配置webpack.config.js中的modules: true 等。
React的脚手架已经内置了css modules的配置:
  • .css/.less/.scss 等样式文件都需要修改成 .module.css/.module.less/.module.scss 等,就可以直接进行引用;

css modules确实解决了局部作用域的问题,也是很多人喜欢在React中使用的一种方案。

缺陷:

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

2. CSS in JS

概念:

  • CSS-in-JS” 是指一种模式,其中 CSS 由 JavaScript 生成而不是在外部文件中定义;
  • 注意此功能并不是 React 的一部分,而是由第三方库提供;
  • CSS-in-JS通过JavaScript来为CSS赋予一些能力,包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修
    改状态等等;
2.1 认识styled-components

npm install styled-components

styled-components的本质是通过函数的调用,最终创建出一个组件:
  • 这个组件会被自动添加上一个不重复的class;
  • styled-components会给该class添加相关的样式;
支持类似于CSS预处理器一样的样式嵌套:
  • 支持直接子代选择器或后代选择器,并且直接编写样式
  • 可以 通过&符号获取当前元素
  • 直接 伪类选择器、伪元素 等;
props、attrs属性:
  • props可以传递
  • props可以被传递给styled组件
  • 添加attrs属性

styles.js

import styled from "styled-components"
import {
  primaryColor,
  largeSize
} from "./style/variables"

// 1.基本使用
export const AppWrapper = styled.div`
  .footer {
    border: 1px solid orange;
  }
`

// const obj = {
//   name: (props) => props.name || "why"
// }


// 2.子元素单独抽取到一个样式组件
// 3.可以接受外部传入的props
// 4.可以通过attrs给标签模板字符串中提供的属性
// 5.从一个单独的文件中引入变量
export const SectionWrapper = styled.div.attrs(props => ({
  tColor: props.color || "blue"
}))`
  border: 1px solid red;

  .title {
    font-size: ${props => props.size}px;
    color: ${props => props.tColor};

    &:hover {
      background-color: purple;
    }
  }

  .content {
    font-size: ${largeSize}px;
    color: ${primaryColor};
  }
`

App.jsx

import React, { PureComponent } from 'react'
import Home from './home'
import { AppWrapper, SectionWrapper } from "./style"

export class App extends PureComponent {

  constructor() {
    super()

    this.state = {
      size: 30,
      color: "yellow"
    }
  }

  render() {
    const { size } = this.state

    return (
      <AppWrapper>
        <SectionWrapper size={size}>
          <h2 className='title'>我是标题</h2>
          <p className='content'>我是内容, 哈哈哈</p>
          <button onClick={e => this.setState({color: "skyblue"})}>修改颜色</button>
        </SectionWrapper>

        <Home/>

        <div className='footer'>
          <p>免责声明</p>
          <p>版权声明</p>
        </div>
      </AppWrapper>
    )
  }
}

export default App
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值