Material-ui: 如何设置全局文字颜色

创建于 2018-04-10 · 6评论 · 资料来源: mui-org/material-ui

我有一个黑暗的主题，当前正在将所有组件中的所有文本呈现为黑色，在黑色背景上。唯一的白色菜单是通过替代设置的菜单

我已经尝试了几种不同的方法，如下所示。我不确定，但是文档引用了一个palette.text，但这似乎不起作用。

如何设置全局字体颜色

import { createMuiTheme } from "material-ui/styles";

const dark = createMuiTheme({
    shadows: ["none"],
    type: 'dark',
    typography: {
      color: 'white',
    },
    palette: {
        background: {
            paper: '#000',
            default: '#000',
        },
        text: {
          default: '#fff',
        },
        textColor: '#fff',
        primary: {
          main: '#ff0000',
        },
    },

    root: {
      textDecoration: 'none',
    },

    overrides: {
    MuiPaper: {
      root: {
        boxShadow: 'none',
      },
    },
    MuiBackdrop: {
      root: {
        backgroundColor: 'rgba(255, 0, 0, 0.75)',
      },
    },
    MuiAppBar: {
      root: {
        background: 'white',
        boxShadow: 'none',
      },
      colorPrimary: {
        backgroundColor: 'transparent'
      }
    },
    MuiIconButton: {
      root: {
        marginLeft: -12,
        marginRight: 20,
        color: 'white',
      }
    }
  }
});

export default dark;

[x]我搜索了此存储库的问题，并认为这不是重复的。

语境

https://codesandbox.io/s/kk6zp8jw07

您的环境

| 技术| 版本|
| -------------- | --------- |
| Material-UI | 1.00beta.40 |
| 反应| 16.3.0 |
| 浏览器| 镀铬|
| 等| |

question

资料来源

afridley

👍2

最有用的评论

）））花几个小时试图弄清楚...所以：


palette:  { 
      text: {
          primary: "#ffffff",
          secondary: "#00000"
    } 
}

color =“ textPrimary”
color =“ textSecondary”

谢谢你，Sleazer！

777akot 于 2019-05-03

👍45 ❤8 🚀6

所有6条评论

全部记录在这里： https :

lazee 于 2018-04-10

👎32

如何设置全局字体颜色

@afridley没有全局字体颜色。您要查找的大多数颜色来自印刷部分。您需要更仔细地阅读文档：

const theme = createMuiTheme({
- type: "dark",
  palette: {
+   type: "dark",
  },
});

https://codesandbox.io/s/vvpnpy6jql

oliviertassinari 于 2018-04-10

@oliviertassinari啊，谢谢您的快速回复，我

palette: {
+   type: "dark",
  },

更改palette.text意味着，如果我知道要添加的内容，则可以使用它手动更改默认字体颜色。

就像palette.background中如何包含纸张和默认纸张一样。我认为也许palette.text可能具有相似的值。但我找不到关于纸张和默认纸张来源的文档包含在palette.background中

所以我想知道是否有关于这些值的文档，因为我似乎只能在问题单上找到它。

palette.text
palette.divider
palette.background
palette.action

ex This works
palette: {
        background: {
            paper: '#000',
            default: '#000',
        },
},

But what values can I change in
palette: {
        text: {
            ?: '#000',
            ?: '#000',
        },
},

根据此处的文档https://material-ui-next.com/customization/themes/#type -light-dark-theme-

afridley 于 2018-04-10

@afridley您可以更改的值是主要，次要，禁用和提示。浏览默认主题对象可以帮助您掌握可以更改的内容以及如何进行更改。

这是一个链接https://material-ui.com/customization/default-theme/

Sleazer 于 2018-08-27

👍4

）））花几个小时试图弄清楚...所以：


palette:  { 
      text: {
          primary: "#ffffff",
          secondary: "#00000"
    } 
}

color =“ textPrimary”
color =“ textSecondary”

谢谢你，Sleazer！

777akot 于 2019-05-03

👍45 ❤8 🚀6

v4中的情况应该有所改善。 CssBasline组件将theme.palette.text.primary应用于body元素。

oliviertassinari 于 2019-05-04

❤5 👍5 👎1

此页面是否有帮助？

0 / 5 - 0 等级

Material-ui: 如何设置全局文字颜色

语境

您的环境

最有用的评论

所有6条评论

相关问题