如何从调色板获取颜色 material ui

Question

1)如何在Typography中从调色板获取颜色？
2)如何使用参数从调色板中获取颜色？

代码：-

1)

    <Box color = 'common.white' >
      <Typography color = '(i need common.white from palette like in Box, so how i can get it here )' >
        Some text  
      </Typography>
    </Box>

    <Box color = '(i need gray[arg] from palette what i need write here for use color with arg like gray[500])'>
      Some text
    </Box>

Answer 1

从 @material-ui 添加预定义颜色，从 @material-ui/core/colors 导入该颜色，然后使用 style prop 的参数添加该颜色。

import Typography from '@material-ui/core/Typography';
import { green } from '@material-ui/core/colors';

export default function Color() {
  return (
    <Typography style={{color:green[600]}}>Green color with argument</Typography>
  );
}

要添加common、primary、secondary或任何与主题相关的颜色，我们需要使用@material-ui的主题对象。所以有两种方法可以做到这一点：-

使用 useTheme 挂钩

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

export default function Color() {
  const theme = useTheme()

  return (
    <Typography style={{color:theme.palette.primary.main}}>primary.main</Typography>
  );
}

使用 makeStyles 在参数本身中提供 theme 对象，无需单独使用 useStyles。

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

export default function Color() {
  const classes = useStyles()
  return (
    <Box>
      <Typography className={classes.secondaryColorStyle}>secondary Color using makestyles</Typography>
      <Typography className={classes.commonBlack}>common black and white using makestyles</Typography>
    </Box>
  );
}

const useStyles = makeStyles((theme) => ({
  secondaryColorStyle:{
    color:theme.palette.secondary.main
  },
  commonBlack:{
    color:theme.palette.common.white,
    backgroundColor:theme.palette.common.black
  }
}));

工作沙箱演示：

如何从调色板获取颜色 material ui

How to get color from palette material ui

themes

colors

reactjs

material-ui