将 material-ui TextField 组件的 underlineFocusStyle 样式设置为正常 css

Question

在Material-UI的组件中，您可以为组件本身提供一个样式对象作为JSX标签上的一个属性，但是您必须为underlineFocusStyle提供一个单独的样式对象例如。

我的意思是例如 TextField 组件的 underlineFocusStyle。

你会这样设计它：

<TextField hintText="Hint Text" style={{width: '80%'}}
  underlineFocusStyle={{backgroundColor: '#0000FF', height: '2px'}}
/>

现在，如何在正常情况下书写 css。组件的 underlineFocusStyle 样式在 TextField 组件样式本身的样式之上？

比如，TextField 的宽度样式当然是：

宽度：100%

但是如何设置 underlineFocusStyle 的样式？类似于：

width: 100&
.underline-focus-style: background-color: #000FF

因为我要给组件一个style，所以要写成css。谢谢。

Answer 1

您可以将 css 样式应用于 underlineFocusStyle 以及任何 material-ui 组件。声明一个 const 样式对象并添加你的 css 如下所示

const style = {
   "background-color": "#fff", color:"#333"
}

然后将此样式对象传递给 underlineFocusStyle 道具，如下所示

<TextField underlineFocusStyle={style} />

希望这能回答您的问题。

Styling a material-ui TextField component's underlineFocusStyle on normal css