Material-ui: グローバルテキストの色を設定するにはどうすればよいですか

作成日 2018年04月10日 · 6コメント · ソース: mui-org/material-ui

現在、すべてのコンポーネントのすべてのテキストを黒の背景に黒でレンダリングしているダークテーマがあります。白いのはオーバーライドで設定されたメニューだけです

以下に示すように、私はいくつかの異なることを試しました。よくわかりませんが、ドキュメントはpalet.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

あなたの環境

| 技術| バージョン|
| -------------- | --------- |
| 素材-UI | 1.00beta.40 |
| React | 16.3.0 |
| ブラウザ| クローム|
| など| |

question

ソース

afridley

👍2

最も参考になるコメント

）））それを理解しようとして数時間を費やしてください... SO：


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

color = "textPrimary"
color = "textSecondary"

ありがとう、スリーザー！

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",
  },

パレット.textを変更すると、何を入れるかがわかっていれば、デフォルトのフォントの色を手動で変更できるようになります。

パレット.backgroundに紙とデフォルトが含まれているように。多分palet.textも同じような値になるのではないかと思いました。しかし、palet.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

）））それを理解しようとして数時間を費やしてください... SO：


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

color = "textPrimary"
color = "textSecondary"

ありがとう、スリーザー！

777akot 2019年05月03日

👍45 ❤8 🚀6

状況はv4で改善されているはずです。 CssBaslineコンポーネントは、body要素にtheme.palette.text.primaryを適用します。

oliviertassinari 2019年05月04日

❤5 👍5 👎1

このページは役に立ちましたか？

0 / 5 - 0 評価

Material-ui: グローバルテキストの色を設定するにはどうすればよいですか

環境

あなたの環境

最も参考になるコメント

全てのコメント6件

関連する問題