Material UI React 无法识别 DOM 元素上的“underlineStyle”道具

Question

我已经按照示例代码为材质 UI TextField 元素的下划线颜色设置样式。

http://www.material-ui.com/#/components/text-field

但是，当我尝试添加自己的样式时，React 无法识别此属性。

<TextField type="number" id="Commission" label="Commission" underlineStyle={{borderColor : orange500}} fullWidth /> 

我在 chrome 开发者控制台中收到以下错误消息

warning.js:33 Warning: React does not recognize the `underlineStyle` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `underlinestyle` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by FormControl)
    in FormControl (created by WithStyles(FormControl))
    in WithStyles(FormControl) (created by TextField)
    in TextField (created by Commissions)
    in div (created by Commissions)
    in div (created by Commissions)
    in Commissions
    in ReactPlaceholder (created by AsyncFunc)
    in AsyncFunc (created by Route)
    in Route (created by App)
    in div (created by App)
    in main (created by App)
    in div (created by App)
    in div (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by RestrictedRoute)
    in RestrictedRoute (created by App)
    in div (created by App)
    in IntlProvider (created by App)
    in MuiThemeProvider (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by MainApp)
    in Switch (created by MainApp)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by MainApp)
    in Provider (created by MainApp)
    in MainApp

npm view material-ui 版本 0.20.0

我已确认此属性存在于 TextField 元素上。

我使用的是 Jumbo React 主题，文本字段的所有下划线颜色默认为紫色。

不知道为什么我的自定义样式不会覆盖 TextField 下划线颜色。

干杯

Answer 1

在 Material-UI v5 中，如果您使用styled()函数创建自定义组件，则在使用自定义 props 时可能会遇到此问题。要解决这个问题，您需要重写shouldForwardProp回调并过滤掉不应传递给 DOM 元素的 props：

const Div = styled("div", {
  shouldForwardProp: (props) =>
    props !== "bgColor" && props !== "width" && props !== "height"
})((p) => ({
  backgroundColor: p.bgColor,
  width: p.width + "px",
  height: p.height + "px"
}));

export default function Why() {
  return (
    <>
      <Div width={30} height={30} bgColor="purple" />
      <Div width={60} height={60} bgColor="blue" />
      <Div width={120} height={120} bgColor="green" />
    </>
  );
}

现场演示

Answer 2

在代码中的某个位置，您将 prop 传递underlineStyle给常规DOM element（在本例中为 a div）而不是react组件

当您使用JSX渲染常规时DOM elements，您应该只传递 valid DOM attributesas props。

这是有效的，因为所有属性都是有效的DOM attributes

<div className="Bla" id="x" style={{color: 'red'}}>
  ...
</div>

这是无效的，因为myOwnCustomProp这不是有效的DOM attribute

<div myOwnCustomProp='I should not be here'>
  ...
</div>

这不是一个错误，只是在以后的 React 版本中引入的警告。更多信息请点击此处