时间戳

首页 > 解决方案 > 以 React 方式重新设置父元素的样式

javascript - 以 React 方式重新设置父元素的样式

问题描述

当您不控制父元素时，将类添加到父元素的“反应”方式是什么。我正在使用 Material UI 和一个基本上是表格的 XGrid。它负责渲染下面的行和列，所以Row无论如何我都不能修改（或 wtv）组件。我只能获取诸如 onClick 或 onHover 之类的事件以及包含普通旧 HTML 元素、id 等的对象。

所以当你有一个常规的 HTML 元素并且无法控制 React 渲染函数时，可以接受的样式化方式是什么？我觉得我不允许使用classList.toggle('classname'). 我什至不了解通过 id 选择元素的反应方式。这甚至允许吗？

标签： javascriptreactjs

解决方案

在 React 中，您不能通过 id 选择元素来设置元素的样式，包括您正在使用的第三方元素。

您主要通过使用props来设置它们的样式。我将给出一些使用 Material UI 库执行此操作的不同方法的示例，但如果您不熟悉 props，则应该阅读文档（https://reactjs.org/docs/components-and-props. html ) 或观看教程。

例如，Material UI 组件有一个名为“classes”的属性，它接受类名。您可以将 classNames 作为“classes”道具传递，然后在 css 中设置 classNames 的样式。

例如，在 React 中：

import Button from '@material-ui/core/Button';
import react from 'react':

<Button classes="buttonStyles"/>

然后在 css 中，根据需要设置类的样式：

.buttonStyles {
   color: red;
}

另一种方法是通过设置第三方库为您提供的公共类的样式，并通过传入 props 来触发这些类。

看一下 Material UI 的 CSS API：https ://material-ui.com/api/button/#css

.Mui-disabled: 如果 disabled={true} 则应用到根元素的伪类。

如果按钮处于禁用状态，此类允许您设置按钮样式。

TL;DR：将类作为道具传递，或样式化库提供给您的公共类。

推荐阅读