Class 与 Style 绑定

基本使用

App.jsx

import './App.css'

const App = () => {
  return (
    <div className="container">
      <h1 style={{ color: 'red', fontSize: '30px' }}>I'm red</h1>
      <button className="button">I'm a button</button>
    </div>
  )
}

export default App

App.css

.container {
  padding: 20px;
  background-color: lightblue;
}

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: darkblue;
}

classnames

介绍

classnames 是一个用于条件地合并类名的 JavaScript 库。它允许你根据条件动态地添加或移除 CSS 类名，使得在 React 组件中处理样式变得更加灵活和简洁。

安装

npm i classnames

示例

classNames('foo', 'bar') // => 'foo bar'
classNames('foo', { bar: true }) // => 'foo bar'
classNames({ 'foo-bar': true }) // => 'foo-bar'
classNames({ 'foo-bar': false }) // => ''
classNames({ foo: true }, { bar: true }) // => 'foo bar'
classNames({ foo: true, bar: true }) // => 'foo bar'

// 多种类型参数混合
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }) // => 'foo bar baz quux'

// 其他假值会被忽略
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, '') // => 'bar 1'

// 数组会按照上述规则递归展开
const arr = ['b', { c: true, d: false }]
classNames('a', arr) // => 'a b c'