组件样式处理

React组件基础的样式控制有2种方式：style行内样式 和 class类名样式。

index.css

.title {
  color: orange;
}

style行内样式

export default function App() {
  return (
    <>
      {/* 行内样式控制 */}
      <div style={{ color: "orange" }}>hello react</div>
    </>
  );
}

class类名样式

import "./index.css";
export default function App() {
  return (
    <>
      {/* class类名控制 */}
      <div className="title">hello react</div>
    </>
  );
}

classnames优化类名控制

classnames是一个简单的 JS 实用程序，用于有条件地将classNames连接在一起。

classNames函数接受任意数量的参数，可以是字符串或对象。该参数'foo'是 { foo: true } 的缩写。

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

---

下载依赖

npm i classnames

使用

import "./index.css";
import classNames from "classnames"
export default function App() {
  return (
    <>
      {/* class类名控制 */}
      <div className={classNames("foo", { bar: type === item.type })}>
        hello react
      </div>
    </>
  );
}