Question

我的材质为ui，有反应，当添加按钮并将颜色设置为主色时，它变为紫色。根据此网站，我期望它是蓝色的： https://material-ui.com/demos/buttons/

代码：

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

如何将此按钮设为蓝色？

Answer 1

按钮的颜色使用Material UI的颜色主题。查看文档以覆盖样式： https://material-ui.com/customization/overrides/#overrides

有很多解决方案，但是在这里您可以使用内联样式：

style={{background: 'blue'}}

这里是一个例子： https://codesandbox.io/s/material-demo-4pfve

Answer 2

他们有一个指向此处的代码沙箱的链接（https://codesandbox.io/s/8kq6zk5kq9）。与页面上的颜色略有不同。因此，我想它们只是在网站上过时了，您拥有的颜色是新颜色。

如果您确实想要蓝色，则应使用发布的页面上所述的Material UI的“ 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);

Answer 3

Material-UI文档站点使用自定义主题。在文档中提到了这一点，请参见https://material-ui.com/customization/default-theme/。主题对象是可自定义的。

如果要与文档使用相同的颜色组合，则需要使用主题。此处提供了一个示例-https://material-ui.com/customization/theming/#custom-variables

例如，您可以执行以下操作，以获得与文档站点相同的原色，

import React from "react";
import { Button } from "@material-ui/core";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#1976d2"
    },
    secondary: {
      main: "#dc004e"
    }
  }
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary">
        Primary
      </Button>
    </ThemeProvider>
  );
}

要获取更多颜色组合，您还可以在此处https://material-ui.com/customization/color/#color-tool使用颜色工具，在其中可以选择主要/辅助颜色组合，然后单击“设置文档颜色”按钮以查看其在文档中的体现。 / p>

蓝色按钮代替紫色

3 个答案: