Material-ui: Wie stelle ich die globale Textfarbe ein?

Erstellt am 10. Apr. 2018 · 6Kommentare · Quelle: mui-org/material-ui

Ich habe ein dunkles Thema, das derzeit den gesamten Text in allen Komponenten als schwarz auf schwarzem Hintergrund rendert. Das einzige, das weiß ist, ist das Menü, das durch eine Überschreibung eingestellt wurde

Ich habe verschiedene Dinge ausprobiert, wie Sie unten sehen können. Ich bin nicht sicher, aber die Dokumente verweisen auf eine palette.text, aber das scheint nicht zu funktionieren.

Wie stelle ich die globale Schriftfarbe ein?

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] Ich habe die Probleme dieses Repositorys durchsucht und glaube, dass dies kein Duplikat ist.

Kontext

https://codesandbox.io/s/kk6zp8jw07

Ihre Umgebung

| Tech | Version |
| -------------- | --------- |
| Material-UI | 1.00beta.40 |
| Reagiere | 16.3.0 |
| Browser | Chrom |
| etc | |

question

Quelle

afridley

👍2

Hilfreichster Kommentar

))) Verbringen Sie ein paar Stunden damit, es herauszufinden ... SO:


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

color = "textPrimary"
color = "textSecondary"

Danke, Sleazer!

777akot am 3. Mai 2019

👍45 ❤8 🚀6

Alle 6 Kommentare

Hier ist alles dokumentiert: https://material-ui-next.com/style/color/

lazee am 10. Apr. 2018

👎32

Wie stelle ich die globale Schriftfarbe ein?

@afridley Es gibt keine globale Schriftfarbe. Der größte Teil der gesuchten Farbe stammt aus dem Typografie-Teil. Sie müssen die Dokumentation genauer lesen:

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

https://codesandbox.io/s/vvpnpy6jql

oliviertassinari am 10. Apr. 2018

@oliviertassinari Ahh danke für die schnelle Antwort Ich kann nicht glauben, dass ich das verpasst habe. Ich dachte an die Notiz darüber, wie

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

Änderungen palette.text bedeutete, dass ich die Standardschriftfarbe damit manuell ändern könnte, wenn ich wüsste, was ich einfügen soll.

Zum Beispiel, wie palette.background Papier und Standard enthält. Ich dachte, vielleicht hat palette.text ähnliche Werte. Ich konnte jedoch keine Dokumentation darüber finden, woher Papier und Standard stammen, um in palette.background aufgenommen zu werden

Ich frage mich also, ob es eine Dokumentation zu diesen Werten gibt, da ich sie scheinbar nur auf Ausstellungskarten finde.

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

Basierend auf der Dokumentation hier https://material-ui-next.com/customization/themes/#type -light-dark-theme-

afridley am 10. Apr. 2018

@afridley Die Werte, die Sie ändern können, sind primär, sekundär, deaktiviert und Hinweis. Wenn Sie sich die Standarddesignobjekte ansehen, können Sie möglicherweise besser verstehen, was wie geändert werden kann.

Hier ist ein Link https://material-ui.com/customization/default-theme/

Sleazer am 27. Aug. 2018

👍4

))) Verbringen Sie ein paar Stunden damit, es herauszufinden ... SO:


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

color = "textPrimary"
color = "textSecondary"

Danke, Sleazer!

777akot am 3. Mai 2019

👍45 ❤8 🚀6

Die Situation hätte sich in Version 4 verbessern sollen. Die CssBasline-Komponente wendet theme.palette.text.primary auf das body-Element an.

oliviertassinari am 4. Mai 2019

❤5 👍5 👎1

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Material-ui: Wie stelle ich die globale Textfarbe ein?

Kontext

Ihre Umgebung

Hilfreichster Kommentar

Alle 6 Kommentare

Verwandte Themen