在普通css上为材质-ui TextField组件的underlineFocusStyle设置样式

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

因为我想为组件提供一个样式，必须用css编写。谢谢。

Answer 1

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

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

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

<TextField underlineFocusStyle={style} />

希望这能回答你的问题。