Class 与 Style 绑定

基本使用

App.jsx

import './App.css'

function 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 加在一起。

安装

npm install 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'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }) // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, { baz: null }, '') // => 'bar'

// array
const arr = ['b', { c: true, d: false }]
classNames('a', arr) // => 'a b c'