在反应中设置传递给变量的元素的样式

Question

我不确定这叫什么，但我创建了一个名为 test 的变量，并将其设置为等于一个元素。

var test = <Button className="testButton" />

然后在我的 return 中，我使用这样的测试变量：

render () {
var test = <Button className="testButton" />
  return{
    {test}
  }
}

我尝试通过应用类名来设置按钮的样式，但这似乎不起作用。关于如何完成此操作的任何想法？

Answer 1

That button is coming from Material-UI or from what?

它确实与 Materia-UI 有某种联系。我几乎可以肯定 Button 获得了 class testButton 并且这些样式与其相关联。但是 Material-UI 中的按钮从 inline-styles 中获取样式，这要归功于 MUI-Theme。

根据Material-UI网站

All Material-UI components have their styles defined inline.

所以基本上，如果您的 class 具有不属于 !important 的样式 - 它们将被简单地忽略，并且无论如何都会采用内联样式。实际上解决方案很少：

Styling an element that is passed into a variable in react