🔴 vue

我们说，vue的样式是这样写的，可以使用class或者style属性来设置元素的样式：

普通设置

class

<button class="my-button">关闭</button>

.my-button {
  color: blue;
}

style

<button class="my-button" style="font-size: 20px;">关闭</button>

动态设置

class

<p :class="{ active: isActive }">动态设置class</p>

单个的vue class样式设置

代码：

效果：

多个的vue class样式设置

代码：

效果：

style

代码：

效果：

🔴 react

class

• react中class 必须要写成className
• class接收的是一个字符串
• 类名和样式写在css文件里

基本使用

// App.js文件

import Son from './Son'
import './App.css'
function App() {
  return (
    <div className="father">
      <Son />
    </div>
  );
}
export default App;

// App.css文件

效果：

style

• 不能像原生一样写成字符串，必须写成对象

基础使用

代码：

效果：

问题

带着问题进入下面篇章：

☝️第一个问题:

问

如何做到react中css做到专用，我们vue中经常用css中的scoped来用作样式的修饰符，限制样式就在当前组件的作用域内，避免样式冲突和全局污染。

那么，react中，我们怎么样做才能做到样式隔离、重用这种组件化开发呢?

这里面react的css的全局生效，污染了其他组件的样式，比如下面这种情况👇：

答

用组件名-module.css这种方式去改css的命名，

比如，我们这个案例用Son.module.css代替Son.css这种写法，还要更改

import './son.css'

更改为

import sonStyle from './son.module.css'

<div className={sonStyle.son}>
  我是son
</div>

这里面，sonStyle打印如下:

这样就可以互不干扰了。

☝️第二个问题:

如何更加舒服地控制类名的添加和减少？

为什么说不舒服？？？

来看看react不做任何操作的情况下，如何动态地控制类名的添加和减少？

// Son.js 函数组件

import './son.css' // son的样式文件
import { useState } from 'react'
function Son() {

  const [son1, setSon1] = useState(false) // 设置son1这个属性来判断son1是否添加到class上面

  const addSon1 = () => {
    setSon1(true)
  }
  const removeSon1 = () => {
    setSon1(false)
  }

  return (
    <>
      // 这里通过字符串拼接的格式来判断某个样式的变通
      <div className={"son " + (son1 ? 'son1' : '')}>
        我是son
      </div>

      <button onClick={addSon1}>添加son1</button>
      <button onClick={removeSon1}>移除son1</button>
    </>
  );
}

export default Son;

// son1就把字体的样式变大

.son1 {
  font-size: 30px;
}

效果：

可以看到，通过这个字符串拼接的class，如果是少量的，那手动拼没什么问题；如果数据多了之后，通过这种字符串拼接的方式是真的麻烦，比较耗精力人力。

那么，更方便操作这种react动态class的，有一个库比较推荐用，叫做classnames。

这个库本质上，就是帮助我们生成一个拼接好的字符串的，我们只需要按照它定义的格式就定义这些需要变动的class即可：

项目装一个下这个库

import './son.css'
import { useState } from 'react'
import classnames from 'classnames'

function Son() {

  const [son1, setSon1] = useState(false)

  const addSon1 = () => {
    setSon1(true)
  }
  const removeSon1 = () => {
    setSon1(false)
  }

  return (
    <>
      // 通过classnames来代替拼接的字符串那种格式
      <div className={classnames({
        son: true,
        son1
      })}>
        我是son
      </div>

      <button onClick={addSon1}>添加son1</button>
      <button onClick={removeSon1}>移除son1</button>
    </>
  );
}

export default Son;

效果，样式依旧是成立的：

那么如果是Son.module.css那种方式的话，就需要这样子修改：

import sonStyle from './Son.module.css'
import classnames from 'classnames/bind' // module的这种css需要引入的是classnames/bind

const bindClassnames = classnames.bind(sonStyle) // 这里bind一下sonStyle

<div className={bindClassnames({
    son: true,
    son1
})}>
我是son
</div>

得到的class里面的是一个拼接的加了module的以空格隔开的字符串：

☎️ 希望对大家有所帮助，如有错误，望不吝赐教，欢迎评论区留言互相学习。感谢阅读，祝您开发有乐趣。