Material-ui: Comment définir la couleur du texte global

Créé le 10 avr. 2018  ·  6Commentaires  ·  Source: mui-org/material-ui


J'ai un thème sombre qui rend actuellement tout le texte de tous les composants en noir sur fond noir. Le seul qui est blanc est le menu qui a été défini par un remplacement

J'ai essayé plusieurs choses différentes comme vous pouvez le voir ci-dessous. Je ne suis pas sûr, mais les documents font référence à un palette.text mais cela ne semble pas fonctionner.

Comment définir la couleur de la police globale

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] J'ai recherché les problèmes de ce référentiel et je pense que ce n'est pas un doublon.

Le contexte


https://codesandbox.io/s/kk6zp8jw07

Votre environnement

| Tech | Version |
| -------------- | --------- |
| Material-UI | 1.00beta.40 |
| React | 16,3,0 |
| navigateur | chrome |
| etc | |

question
Source
picture afridley
👍2

Commentaire le plus utile

))) Passez quelques heures à essayer de le comprendre ... SO:


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

color = "textPrimary"
color = "textSecondary"

Merci, Sleazer!

picture 777akot le 3 mai 2019
👍45 ❤8 🚀6

Tous les 6 commentaires

Tout est documenté ici: https://material-ui-next.com/style/color/

lazee picture lazee le 10 avr. 2018
👎32

Comment définir la couleur de la police globale

@afridley Il n'y a pas de couleur de police globale. La plupart des couleurs que vous recherchez proviennent de la partie typographie. Vous devez lire la documentation de plus près:

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

https://codesandbox.io/s/vvpnpy6jql

oliviertassinari picture oliviertassinari le 10 avr. 2018

@oliviertassinari Ahh merci pour la réponse rapide, je ne peux pas croire que j'ai raté ça. Je pensais à la note sur la façon dont

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

changes palette.text signifiait que je pourrais changer manuellement la couleur de police par défaut avec cela si je savais quoi y mettre.

comme la façon dont palette.background contient du papier et par défaut. J'ai pensé que palette.text pouvait avoir des valeurs similaires. Mais je n'ai pas trouvé de documentation sur l'origine du papier et des valeurs par défaut pour être inclus dans la palette.

Je me demande donc s'il existe de la documentation sur ces valeurs, car je ne peux la trouver que sur les tickets d'émission.

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

Basé sur la documentation ici https://material-ui-next.com/customization/themes/#type -light-dark-theme-

afridley picture afridley le 10 avr. 2018

@afridley Les valeurs que vous pouvez modifier sont primaires, secondaires, désactivées et hint. L'examen des objets de thème par défaut peut vous aider à comprendre ce qui peut être modifié et comment.

Voici un lien https://material-ui.com/customization/default-theme/

Sleazer picture Sleazer le 27 août 2018
👍4

))) Passez quelques heures à essayer de le comprendre ... SO:


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

color = "textPrimary"
color = "textSecondary"

Merci, Sleazer!

777akot picture 777akot le 3 mai 2019
👍45 ❤8 🚀6

La situation aurait dû s'améliorer dans la v4. Le composant CssBasline applique theme.palette.text.primary à l'élément body.

oliviertassinari picture oliviertassinari le 4 mai 2019
❤5 👍5 👎1
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

rbozan picture rbozan  ·  3Commentaires
reflog picture reflog  ·  3Commentaires
TimoRuetten picture TimoRuetten  ·  3Commentaires
ryanflorence picture ryanflorence  ·  3Commentaires
anthony-dandrea picture anthony-dandrea  ·  3Commentaires