React 样式CSS的定义 多种定义方式 前端基础

介绍

在 React 应用中，样式管理是重要的一环，有多种 CSS 样式定义方式，每种方式都有其特点和适用场景。以下是 React 中常见的 CSS 样式处理方式介绍。

行内样式

<button   style={{background:'red',color:'#ffffff',border:'none' }} onClick={() => setCount(count + 1)}>增加</button>

对象形式

const style={color:'#ffffff',backgroundColor:'#000000',fontSize:'50px'
}
function App() {const [count, setCount] = useState(0);  // 设置初始值为0return (<div><h1>{count}</h1><button   style={style}onClick={() => setCount(count + 1)}>增加</button></div>);
}

样式文件

css文件

.login-button{padding: 5px;color: #ffffff;background-color: #f48798;
}

js文件

import './App.css';function App() {const [count, setCount] = useState(0);  // 设置初始值为0return (<div><h1>{count}</h1><button   className="login-button"onClick={() => setCount(count + 1)}>增加</button></div>);
}