如何在 div 中使用 Material UI 主题颜色？

Question

我制作了一个使用一些 Material UI 组件的库，它们根据安装它们的项目提供的主题调整颜色。我还想在 div 上使用“主要”、“次要”颜色，因为我希望背景颜色也适应主题。有没有办法做到这一点？

在按钮中我唯一需要做的就是

<Button color="secondary"/>

但是我该如何做与 div 相同的事情呢？

const MainContainer = styled.div`
      background: secondary;
    `;

如何使该辅助颜色成为父项目主题的颜色，就像按钮中一样？

Answer 1

我之前没有任何使用经验style compononent。但至于，您可以通过两种方式materail-ui申请：-color

1. 使用useTheme（仅内联使用 - 据我所知），导入自material-ui/core/styles：-

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

export const Demo = () => {
  const theme = useTheme()

  return (
    <div style={{ backgroundColor: theme.palette.primary.main }}>Hi You!</div>  
  )
}

2. 使用makeStyles（您只能在没有 的情况下使用它styled-component），导入自material-ui/core/styles

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

export const Demo = () => {
  const classes = useStyles()

  return (
    <div className={classes.divStyle}>Hi You!</div>  
  )
}

const useStyles = makeStyles(theme => ({
  divStyle: {
    backgroundColor: theme.palette.primary.main
    // or any color
    // backgroundColor: 'red'
  }
}))