css - 在 React 中添加和删除类

Question

如何在单击时添加/删除类名以更改某些组件的样式？

• display: none;当我点击它和它旁边的所有组件时，我想旋转右边的箭头。

• 我还想在遇到移动断点时添加做同样的事情

标签： cssreactjsmaterial-uimakestyles

Answer 1

const [isRotated, setIsRotated] = useState(false);

handleClick() {
 setIsRotated(true)
}

<button className={isRotated && 'rotate-class'} onClick={handleClick} />
{ !isRotated && <Element/>} // this will hide the element when clicked on the button

这将是一种比设置display: none其他元素更好的方法，但如果您必须这样做，请执行以下操作：

 <Element style={{ display: isRotated ? 'none': 'block' }} /> // I'm guessing the default style of display is 'block' of the elements you want to hide