Mui 函数将颜色更改为黑色或与背景颜色有关答案

【问题标题】：Mui function to change color to either black or with in regard to blackground colorMui 函数将颜色更改为黑色或与背景颜色有关
【发布时间】：2021-08-18 08:03:53
【问题描述】：

我想知道我可以从材质 ui 中使用哪个函数来获得其将文本颜色更改为白色或黑色关于黑底颜色的特性，如果 bg 是暗的，它会将颜色更改为白色，如果 bg 是亮的，它会更改颜色为黑色。示例

<AppBar color="primary">
     <Toolbar>
         <Typography color="inherit" > some text </Typography>
     </Toolbar>
</AppBar>

现在，如果我的原色是深色，MUI 会自动将我的文本颜色更改为白色，而浅色会自动更改为黑色。

我基本上可以使用哪个功能或任何东西来完成此功能。

我尝试了一个 CSS 属性

mix-blend-mode: "difference"

但它不像 MUI 中那样提供黑色/白色，它只是提供一种具有对比度的颜色，使其可见。

【问题讨论】：

标签： html css reactjs material-ui

【解决方案1】：

两种选择：

您可以尝试使用 Material-UI 内置的getContrastColor 方法，如：

<AppBar color="primary">
     <Toolbar>
         <Typography sx={{color: theme.palette.getContrastText("YourColorHere")}}>
           some text 
         </Typography>
     </Toolbar>
</AppBar>

或者您可以将mix-blend-mode: "difference" 与color: "white" 结合使用（并且可以选择将其包装在具有filter: "grayscale(1)" 的父div 中）。见this example。

【讨论】：