Изменить стандартный цвет текста Пользовательский интерфейс - PullRequest
Новая
       13

Изменить стандартный цвет текста Пользовательский интерфейс

1 голос
/ 08 октября 2019

Где я могу изменить цвет текста по умолчанию в теме пользовательского интерфейса материала?

Настройка primary, secondary и error работает 

const styles = { a: 'red', b: 'green', ... };

createMuiTheme({
    palette: {
        primary: {
          light: styles.a,
          main: styles.b,
          dark: styles.c,
          contrastText: styles.d
        },
        secondary: {
          light: styles.aa,
          main: styles.bb,
          dark: styles.cc,
          contrastText: styles.dd
        },
        error: {
          light: styles.aaa,
          main: styles.bbb,
          dark: styles.ccc,
          contrastText: styles.ddd,
        },
    ...,
    }
...,
}

Теперь, когда я использую<Typography /> компонент, я могу сделать это 

<Typography
  color='primary'
  variant='h6'>
  Foo
</Typography>

Это дает ему цвет, который я определил в palette.primary.main.

Однако, когда я оставляю color пропу пустым

1018

Я даю сероватый цвет. Где этот цвет определяется? Где я могу определить дополнительные цвета текста, несмотря на primary, secondary и error?

Простое добавление еще одного ключа к palette не работает ... 

createMuiTheme({
    palette: {
        ...,
        text1: {
          light: styles.t,
          main: styles.tt,
          dark: styles.ttt,
          contrastText: styles.tttt,
        },
    ...
    }
...
}

1 Ответ

0 голосов
/ 08 октября 2019

Это делается следующим образом. 

createMuiTheme({
    palette: {
        ...,
        text: {
          primarey: styles.t,
          secondary: styles.tt,
          disabled: styles.ttt,
          hint: styles.tttt,
        },
    ...
    }
...
}

Убедитесь, что primary является color code, а не object. Цвета можно использовать так: 

<Typography
    color='textPrimary'> // or 'textSecondary', 'hint', 'disabled'
    Foo Bar
</Typography>
...