Material-ui: Как установить глобальный цвет текста

Созданный на 10 апр. 2018  ·  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

Ваше окружение

| Технология | Версия |
| -------------- | --------- |
| Материал-UI | 1.00beta.40 |
| React | 16.3.0 |
| браузер | хром |
| и т.д | |

question
Источник
picture afridley
👍2

Самый полезный комментарий

))) Потратьте пару часов на то, чтобы разобраться ... ТАК:


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

color = "textPrimary"
color = "textSecondary"

Спасибо, Слизер!

picture 777akot 3 мая 2019
👍45 ❤8 🚀6

Все 6 Комментарий

Все это задокументировано здесь: https://material-ui-next.com/style/color/

lazee picture lazee 10 апр. 2018
👎32

Как установить глобальный цвет шрифта

@afridley Нет глобального цвета шрифта. По большей части цвет, который вы ищете, исходит от типографской части. Внимательно прочтите документацию:

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

https://codesandbox.io/s/vvpnpy6jql

oliviertassinari picture oliviertassinari 10 апр. 2018

@oliviertassinari Ах, спасибо за быстрый ответ. Не могу поверить, что я это пропустил. Я думал о записке о том, как

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

changes 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 picture afridley 10 апр. 2018

@afridley Значения, которые вы можете изменить: primary, secondary, disabled и hint. Просмотр объектов темы по умолчанию может помочь вам понять, что и как можно изменить.

Вот ссылка https://material-ui.com/customization/default-theme/

Sleazer picture Sleazer 27 авг. 2018
👍4

))) Потратьте пару часов на то, чтобы разобраться ... ТАК:


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

color = "textPrimary"
color = "textSecondary"

Спасибо, Слизер!

777akot picture 777akot 3 мая 2019
👍45 ❤8 🚀6

Ситуация должна была улучшиться в v4. Компонент CssBasline применяет theme.palette.text.primary к элементу body.

oliviertassinari picture oliviertassinari 4 мая 2019
❤5 👍5 👎1
Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

rbozan picture rbozan  ·  3Комментарии
mb-copart picture mb-copart  ·  3Комментарии
reflog picture reflog  ·  3Комментарии
mattmiddlesworth picture mattmiddlesworth  ·  3Комментарии
ghost picture ghost  ·  3Комментарии