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

【问题标题】：How do I use Material UI theme colors inside a div?如何在 div 中使用 Material UI 主题颜色？
【发布时间】：2021-03-07 21:33:36
【问题描述】：

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

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

<Button color="secondary"/>

但是我该如何做与 div 等效的操作呢？

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

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

【问题讨论】：

可以显式设置为颜色值； div 没有这样的“次要”颜色

标签： reactjs material-ui styled-components

【解决方案1】：

我之前没有使用style compononent 的任何经验。但是对于materail-ui，你可以通过2种方式申请color：-

使用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>  
  )
}

使用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'
  }
}))

【讨论】：

太棒了！很高兴能够提供帮助。

【解决方案2】：

您可以使用 useTheme 钩子访问 theme 对象中存在的颜色。

https://material-ui.com/styles/api/#usetheme-theme

【讨论】：