React组件的Material UI主题是否与android组件的Material Design Theme遵循相同的准则？

Question

我是ReactJS的新手，正在为我的Web应用程序实现一个主题。开发Android应用程序时，我会自定义主题，默认情况下，材质组件会使用主题的颜色。

例如，如果我将color_on_primary设置为#ffffff，则默认情况下，“材质按钮”组件将使用该颜色作为其图标色调。

Material UI组件也一样吗？

Answer 1

简短的回答是。为了使它起作用，您应该遵循一些步骤。 对于material-ui，建议对主题使用createMuiTheme（）。下面是您的用法。

// theme.js
import { createMuiTheme } from '@material-ui/core/styles'

const theme = createMuiTheme({
  palette: {
    // Color of the button if you use <Button color="primary"></Button>
    primary: {
      main: "#FF9F1C"
    },
    // Color of the button if you use <Button color="secondary"></Button>
    secondary: {
      main: "#2EC4B6"
    },
  },
  typography: {
    // General button css
    button: {
      fontFamily: "'Montserrat', sans-serif",
      textTransform: null,
      fontSize: 16
    }
  },
})

export default theme

然后，您将拥有一个ThemeProvider组件，您可以在其中传递刚刚创建的主题。

// example.js
import React from 'react'
import { ThemeProvider } from '@material-ui/styles'
import { makeStyles } from '@material-ui/core/styles';
import theme from 'theme.js'
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({
  // Some extra styling if you'd like
  button: {
    margin: theme.spacing(1),
  },
}));

export default function Example() {
  const classes = useStyles();
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary" className={classes.button}>I'm a button</Button>
    </ThemeProvider>
  )
}

强烈建议您检查material-ui组件的API。

材料UI按钮API-> https://material-ui.com/api/button/

如果您查看组件的“道具”部分，则可以看到该颜色道具将使用您的主题（如果提供）。一开始很难掌握，但是您会习惯的。