Mui 功能可将颜色更改为黑色或黑色底色

Question

我想知道我可以使用 Material ui 中的哪个函数来获取其将黑底颜色的文本颜色更改为白色或黑色的特征属性，如果 bg 为深色，则将颜色更改为白色，如果 bg 为浅色，则将颜色更改为黑色。示例

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

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

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

我尝试了一个CSS属性

mix-blend-mode: "difference"

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

Answer 1

两种选择：

1. 您可以尝试使用Material-UI的内置getContrastColor方法，如下所示：

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

2. 或者您可以mix-blend-mode: "difference"结合使用color: "white"（并且可以选择将其包装在具有 的父 div 中filter: "grayscale(1)"）。请参阅此示例。