Синяя кнопка вместо фиолетовой

Question

У меня есть Material-UI с реагировать, и когда я добавляю кнопку и устанавливаю основной цвет, он становится фиолетовым. Я ожидал, что это будет синим, основываясь на этом сайте: https://material -ui.com / демки / кнопки /

Код:

      <Button variant="contained" color="primary">
        Primary
      </Button>

Как сделать эту кнопку синей?

Answer 1

Цвет для кнопок использует цветовые темы Material UI. Посмотрите на документ, чтобы переопределить стиль: https://material -ui.com / настройки / переопределяет / # переопределяет

Существует много решений, но здесь вы можете использовать встроенный стиль, например:

style={{background: 'blue'}}

Вот пример: https://codesandbox.io/s/material-demo-4pfve

Answer 2

У них там есть ссылка на кодовую песочницу (https://codesandbox.io/s/8kq6zk5kq9).Он показывает немного другие цвета, как на странице.Так что я думаю, что они просто устарели на сайте, а цвета у вас новые.

Если вы действительно хотите синий цвет, вам следует использовать функцию «withStyles» пользовательского интерфейса материала, как описано на странице, которую вы разместили.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const styles = theme => ({
  button: {
    backgroundColor: 'blue',
  }
});

function ContainedButtons(props) {
  const { classes } = props;
  return (
    <div>
      <Button variant="contained" color="primary" className={classes.button}>
        Primary
      </Button>
    </div>
  );
}

ContainedButtons.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ContainedButtons);