react-8(类名样式)

import React, { Component } from 'react';
import ReactDOM from 'react-dom/client';
import classNames from 'classnames';
import './btn.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
// 注意. jsx中类名要写在className属性中
// 利用插值表达式可以实现动态类名, 利用一些三目运算符
// 也可以利用classNames函数结合对象的形式来生成对应条件下的类名
const App = () => {
  const isError = true
  const btnClassNames = classNames('btn', { 'btn__error': isError })
  return (
    <div>
      <button className="btn">button</button>
      <button className="btn btn__error">error</button>
      <button className={`btn ${ isError ? 'btn__error' : '' }`}>X</button>
      <button className={btnClassNames}>Y</button>
    </div>
  )
}

root.render(
  <App />
)