Цвет текста не работает в теме Material-UI - PullRequest
0 голосов
/ 21 декабря 2018

При создании темы для цветов с помощью Material-UI я установил контрастный текст на белый (#fff).Он работает для кнопки с основным цветом, но не с дополнительным.

Пробные переопределения, как описано здесь: Материал интерфейса: невозможно изменить цвет текста кнопки в теме .Если переопределение решит это, то мне нужна помощь в написании одного.

const colortheme = createMuiTheme({
    palette: {
        primary: { main: '#e91e63' },
        secondary: { main: '#03a9f4' },
        contrastText: '#fff',
    }
});

Ожидается, что обе кнопки будут иметь белый текст.Вместо этого получилась одна кнопка черного цвета:

enter image description here

Редактировать: я создал тему и отобразил компонент SimpleModal пользовательского интерфейса материала на родительском элементе, передав тему теме дочернему элементу.Кнопка отображается на дочернем элементе.

parent:

const blues = createMuiTheme({
    palette: {
        primary: { main: '#00e5ff' },
        secondary: { main: '#2979ff' },
        contrastText: '#fff'
    }
})

 <SimpleModal label="content" theme={blues} color="primary" document="content" />

child:

            <div>
                <MuiThemeProvider theme={this.props.theme}>
                    <Button className={classes.margin} variant="contained" color={this.props.color} onClick={this.handleOpen}>{this.props.label}</Button>
                </MuiThemeProvider>
                <Modal open={this.state.open} onClose={this.handleClose}>
                    <div style={getModalStyle()} className={classes.paper}>
                        <Typography variant="h6" id="modal-title">{this.state.reference}</Typography>
                        <Typography variant="subtitle1" id="simple-modal-description">{this.state.content}</Typography>
                    </div>
                </Modal>
            </div>

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

Чтобы иметь белый текст для обоих цветов, вы хотите:

const colortheme = createMuiTheme({
  palette: {
    primary: { main: "#e91e63", contrastText: "#fff" },
    secondary: { main: "#03a9f4", contrastText: "#fff" }
  }
});

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * должен быть указан в каждом цветовом намерении

Вот полный пример, показывающий это:

Edit 81xpxy6312

0 голосов
/ 21 декабря 2018

Попробуйте добавить отдельный контрастный текст и изменяйте его, пока он не совпадет, поскольку цвет зависит от фона.Таким образом, вы должны выбрать правильный цвет с правильным фоном.Смотрите это: https://material -ui.com / style / color /

const blues = createMuiTheme({
    palette: {
        primary: { main: '#00e5ff',contrastText: '#fff', },
        secondary: { main: '#2979ff',contrastText: '#000', },

    }
})

Для двух приведенных выше цветов используйте этот код:

const blues = createMuiTheme({
    palette: {
        primary: { main: '#e91e63' },
        secondary: { main: '#0277bd' },

    }
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...