Как получить доступ к светлым и темным вариантам основного и вторичного цветов React Material-UI?

Question

Документы Material-UI для React говорят, что светлые и темные варианты ваших основных и дополнительных цветов будут рассчитываться автоматически.

(Из документов: https://material-ui.com/customization/palette/)

const theme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#ff4400',
      // dark: will be calculated from palette.primary.main,

То, что я не могу найти, так это то, как получить доступ к этим цветам для использования в моих компонентах. После реализации темы, например, так:

const theme = createMuiTheme({
  palette: {
    secondary: {
      main: '#287a9f'
    }
  }
})

Как мне тогда указать, что я бы хотел, чтобы компонент использовал вариант светлого вторичного цвета? Что-то вроде:

<AppBar color="Primary.light" />

Я, конечно, мог бы просто реализовать их вручную в качестве пользовательских цветов, но это, похоже, противоречит цели автоматического вычисления c.

Мудрость очень ценится.

Answer 1

Когда вы создаете свою собственную тему, передайте ее ThemeProvider следующим образом:

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

const theme = createMuiTheme({
  palette: {
    secondary: {
      main: '#287a9f'
    }
  }
});

function App() {

  return (
    <ThemeProvider theme={theme}>
      <Children />
    </ThemeProvider>
  )
}

И есть много способов доступа к переменным темы , Например, вы можете использовать makeStyles или useTheme:

makeStyles:

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
 myComp: { backgroundColor: theme.palette.primary.light }
});

function DeepChild() {
  const classes = useStyles();

  return <Component className={classes.myComp} />;
}

useTheme:

import { useTheme } from '@material-ui/core/styles';

function DeepChild() {
  const theme = useTheme();

  return <Component color={theme.palette.primary.light} />;
}

Обратите внимание, что свойство color компонента AppBar поддерживает одно из

["default","inherit","primary","secondary","transparent"]

Таким образом, чтобы переопределить цвет для * Компонент 1032 *, как в вашем примере, вам нужно передать пользовательский класс:

import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';

const useStyles = makeStyles(theme => ({
 appBar: { backgroundColor: theme.palette.primary.light }
});

function DeepChild() {
  const classes = useStyles();

  return <AppBar className={classes.appBar} />;
}