时间戳

首页 > 解决方案 > React Js 新手关于样式的问题

reactjs - React Js 新手关于样式的问题

问题描述

我在反应中查看有关样式组件的信息。例如我有一个按钮，我想在点击后更改背景颜色。Atm 我只是更改了预定义的 css 类，但我可以用其他方式来做。什么是最常见和推荐的做法？

标签： reactjs

解决方案

您可以使用内联样式根据组件的状态更改 css，例如：

const Example = (props) => {
    const [isActive, setIsActive] = useState(false);

    let styleStatus = isActive ?
        {
            backgroundColor: 'green',
            fontSize: '20',
        } :
        {
            backgroundColor: 'red',
            fontSize: '15',
        };

    return <div>
        <div style={styleStatus}> {isActive ? 'Active' : 'Deactive'} </div>;
        <button onClick={() => setIsActive(!isActive)}> Click to change css </button>
    </div>
}

推荐阅读