Question

我正在尝试使用Google制作的Material-UI为具有自定义主题的React Project制作样板。

我遵循了这个Google codelab：https://codelabs.developers.google.com/codelabs/mdc-112-web/index.html?index=..%2F..%2Findex#0

基本上，我的计划是使用此处列出的组件制作自定义组件：https://github.com/material-components/material-components-web-react

但是，教程（codelab）没有显示有关更改组件样式的信息。

我需要帮助。感谢。

Answer 1

我希望这对寻求可能的解决方案的人有用。可以在Material UI的文档中找到here，并提供清晰的示例。

我将向您展示带有组件的全局主题解决方案，这将为您提供组件之间的一致性并应用全局样式。

您可以利用overrides键从字面上覆盖由Material UI注入DOM的类和元素的样式。您可以在浏览器中检查它们，然后查看要自定义的对象。

您必须将子组件包装在MuiThemeProvider内，并将createMuiTheme对象作为主题属性值传递给它。

import React from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';


const theme = createMuiTheme({
  overrides: {
    // overrides label color and asterisk (if input set as required)
    MuiInputLabel: {
      root: {
        color: '#001E50 !important',
        '&$focused': {
          color: '#001E50 !important'
        }
      },
      asterisk: {
        color: '#001E50 !important'
      }
    },
    // overrides input styles
    MuiInputBase: {
      root: {
        color: '#001E50 !important',
        '&$focused': {
          color: '#001E50 !important'
        }
      }
    },
    // overrides the bottom line of the input
    MuiInput: {
      underline: {
        '&:before': {
          borderBottom: '1px solid #DFE4E8 !important'
        },
        '&:after': {
          borderBottom: '1px solid #001E50 !important'
        },
        }
      }
    }
  },
});


export function CustomInput() {
    return (
        <ThemeProvider theme = { theme }>
            <TextField name="name" label="Name" required/>
        </ThemeProvider>
    )
})

在React中自定义Material-UI组件

1 个答案: