Material-UI React 无法识别 DOM 元素上的“underlineStyle”props

IT技术 javascript reactjs material-ui
2021-05-20 10:03:44

我已经按照示例代码为 Material-UITextField元素的下划线颜色设置样式。

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 主题，Textfields 的所有下划线颜色默认为紫色。

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

2个回答

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

当您用于JSX呈现常规时DOM elements，您应该只将有效DOM attributes作为props.

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

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

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

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

这不是错误，只是在后来的 React 版本中引入的警告。更多信息在这里

在 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" />
    </>
  );
}

现场演示

编辑 49613774/material-ui-react-does-not-recognize-the-underlinestyle-prop-on-a-dom-element

其它你可能感兴趣的问题
上一篇React TypeScript 从点击事件中获取数据属性 下一篇在 createMuiTheme 中覆盖主题变量时如何设置断点