Material-ui: Como faço para definir a cor global do texto
Eu tenho um tema escuro que está renderizando todo o texto em todos os componentes como preto em um fundo preto. O único que é branco é o menu que foi configurado através de uma substituição
Eu tentei várias coisas diferentes, como você pode ver abaixo. Não tenho certeza, mas os documentos fazem referência a um palette.text, mas isso não parece funcionar.
Como faço para definir a cor da fonte global
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] Pesquisei os problemas deste repositório e acredito que não seja uma duplicata.
Contexto
https://codesandbox.io/s/kk6zp8jw07
Seu Ambiente
| Tech | Versão |
| -------------- | --------- |
| Material-UI | 1.00beta.40 |
| React | 16.3.0 |
| navegador | cromo |
| etc | |
afridley
Todos 6 comentários
Está tudo documentado aqui: https://material-ui-next.com/style/color/
lazee
em 10 abr. 2018
Como faço para definir a cor da fonte global
@afridley Não há cor de fonte global. A maior parte da cor que você está procurando vem da parte da tipografia. Você precisa ler a documentação mais de perto:
const theme = createMuiTheme({
- type: "dark",
palette: {
+ type: "dark",
},
});
oliviertassinari
em 10 abr. 2018
@oliviertassinari Ahh obrigado pela resposta rápida Não posso acreditar que perdi isso. Eu estava pensando na nota sobre como
palette: {
+ type: "dark",
},
muda palette.text significava que eu seria capaz de alterar manualmente a cor da fonte padrão se soubesse o que inserir nela.
como como palette.background tem papel e padrão nele. Achei que talvez palette.text pudesse ter valores semelhantes. Mas não consegui encontrar documentação sobre a origem do papel e do padrão para serem incluídos em palette.background
Portanto, estou me perguntando se há documentação sobre esses valores, porque só consigo encontrá-los em tickets de problema.
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',
},
},
Com base na documentação aqui https://material-ui-next.com/customization/themes/#type -light-dark-theme-
afridley
em 10 abr. 2018
@afridley Os valores que você pode alterar são primário, secundário, desabilitado e dica. Examinar os objetos de tema padrão pode ajudá-lo a entender o que pode ser alterado e como.
Aqui está um link https://material-ui.com/customization/default-theme/
Sleazer
em 27 ago. 2018
))) Passe algumas horas tentando descobrir ... ASSIM:
palette: {
text: {
primary: "#ffffff",
secondary: "#00000"
}
}
color = "textPrimary"
color = "textSecondary"
Obrigado, Sleazer!
777akot
em 3 mai. 2019
A situação deveria ter melhorado na v4. O componente CssBasline aplica theme.palette.text.primary ao elemento do corpo.
oliviertassinari
em 4 mai. 2019
Questões relacionadas
pola88
·
3Comentários
TimoRuetten
·
3Comentários
ericraffin
·
3Comentários
mattmiddlesworth
·
3Comentários
activatedgeek
·
3Comentários
Comentários muito úteis
))) Passe algumas horas tentando descobrir ... ASSIM:
color = "textPrimary"
color = "textSecondary"
Obrigado, Sleazer!