Material-ui @next自定义按钮颜色？

时间：2017-09-29 10:07:48

标签： javascript material-ui

我正在努力修改Material-UI @ next（v1）中的按钮颜色。

我如何设置muitheme与bootstrap的相似性，所以我可以使用“btn-danger”表示红色，“btn-success”表示绿色......？

我尝试使用自定义className但它无法正常工作（悬停颜色不会改变）并且它似乎重复。我有什么选择？

10 个答案:

答案 0 :(得分：11)

我在这个帖子中使用Brendans答案提出了这个解决方案。希望它可以帮助处于类似情况的人。

import React, { Component } from 'react'
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'
import Button from 'material-ui/Button'
import { red, blue } from 'material-ui/colors'

const redTheme = createMuiTheme({ palette: { primary: red } })
const blueTheme = createMuiTheme({ palette: { primary: blue } })

class Buttons extends Component {
  render = () => (
    <div className="ledger-actions-module">
      <MuiThemeProvider theme={redTheme}>
        <Button color="primary" variant="raised">
          Delete
        </Button>
      </MuiThemeProvider>
      <MuiThemeProvider theme={blueTheme}>
        <Button color="primary" variant="raised">
          Update
        </Button>
      </MuiThemeProvider>
    </div>
  )
}

答案 1 :(得分：9)

Bagelfp的答案有误，还有其他一些事情需要考虑;

首先，＆＃39;错误＆＃39;不是材料-ui @ next v1＆＃39; s Button component中支持的颜色主题。只有＆＃39;默认＆＃39;，＆＃39;继承＆＃39;，＆＃39; primary＆＃39;和＆＃39;中学＆＃39;被颜色道具接受。

到目前为止，我发现这是最简单的方法。首先，选择两种最常见的主题颜色，并将它们放在应用的根目录中。

import React from 'react';
import { Component } from './Component.js'
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

const theme = createMuiTheme({
  palette: {
    primary: purple,
    secondary: green,
    error: red,
  },
});

export class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <Component />
        ...
      </MuiThemeProvider>
    );
  }
}

然后在您的组件中，只需选择具有所需颜色的主题; 

import React from 'react';
import Button from 'material-ui/Button';

export const Component = (props) => (
  <div>
    <Button variant="fab" color="primary">
      I am purple, click me!
    </Button>
  </div>
)

如果您需要第三种和第四种颜色，只需像在App.js中一样使用新的托盘导出Component.js。

这是我发现的唯一一个允许我保留黑暗悬停效果的解决方案（official override examples没有保留功能悬停）。我真的希望我能找到一种方法，在调用Button时简单地放入一个新的主题颜色，但是现在这是最简单的方法。

编辑：我新的首选方法是使用styled-components和material-ui buttonbase创建一个CustomButton组件。我还将样式组件主题提供程序放在我的应用程序的根目录旁边，与我的MuiThemeProvider一起。这使我可以轻松访问所有样式组件中的其他主题颜色，而无需导入和删除更多的ThemeProviders。在我的CustomButton的情况下，我只是给它一个theme道具，它被传递到styled(ButtonBase)中的css。有关详细信息，请参阅样式组件文档。

答案 2 :(得分：4)

您可以尝试

<Button
    style={{
        borderRadius: 35,
        backgroundColor: "#21b6ae",
        padding: "18px 36px",
        fontSize: "18px"
    }}
    variant="contained"
    >
    Submit
</Button>

答案 3 :(得分：3)

您可以创建theme为其3个支持的intentions（主要，次要，错误）中的每一个定义调色板，然后在color上使用<Button>道具使用那些。 在您的示例中，btn-danger可以是<Button color='error'>

编辑：Brendan的回答是正确的，error不支持Button。根据文档Button仅支持“对此组件有意义”的意图，因此只有primary和secondary可以在此处使用。

来自their docs（在这里稍微修剪一下）：

const theme = createMuiTheme({
  palette: {
    primary: purple,
    secondary: red
  }
});

function Palette() {
  return (
    <MuiThemeProvider theme={theme}>
      <div>
        <Button color="primary">{'Primary'}</Button>
        <Button color="secondary">{'Secondary'}</Button>
      </div>
    </MuiThemeProvider>
  );
}

有关为组件创建主题的更实际示例，请参阅Brendan's Answer。

答案 4 :(得分：1)

您可以使用theme.palette.getContrastText()根据背景色值计算正确的文本颜色。

import { Button, makeStyles } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  deleteButton: {
    // to make a red delete button
    color: theme.palette.getContrastText(theme.palette.error.main),
    background: theme.palette.error.main,
  }
}));

export const DeleteButton = () => {
  const classes = useStyles();
  return (
    <Button className={classes.deleteButton}>Delete</Button>
  );
}

答案 5 :(得分：0)

首先尝试安装npm install @ material-ui / styles 根据材料文档应用样式，对于react类组件，可以使用以下代码：

import React, {Component} from "react";
import { styled } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const MyButton = styled(Button)({
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
});
class AprinClass extends Component {
    render() {
        return (
            <MyButton>Styled Components</MyButton>
        )
    }
}
export default AprinClass;

有关参考的更多信息，请检查我的博客。 https://medium.com/@farbodaprin/how-to-make-a-customisable-material-ui-button-a85b6534afe5

答案 6 :(得分：0)

尝试一下：

import * as React from 'react';
import Button, { ButtonProps } from "@material-ui/core/Button";
import { Theme } from '@material-ui/core';
import { withStyles } from '@material-ui/styles';

const styles: (theme: Theme) => any = (theme) => {
    return {
        root:{
            backgroundColor: theme.palette.error.main,
            color: theme.palette.error.contrastText,
            "&:hover":{
                backgroundColor: theme.palette.error.dark
            },
            "&:disabled":{
                backgroundColor: theme.palette.error.light
            }
        }
    };
};

export const ButtonContainedError = withStyles(styles)((props: ButtonProps) => {
    const { className, ...rest } = props;
    const classes = props.classes||{};
    return <Button {...props} className={`${className} ${classes.root}`} variant="contained" />
});

现在您可以在任何地方使用ButtonContainedError。

这与您的主题一致。

答案 7 :(得分：0)

我发现！important 在课程中起作用。 （反应钩）

const styles "...etc..." = (theme: Theme) => ({
    buttonWarning: {
        backgroundColor: theme.palette.warning.dark + '!important'
    }
}))

然后单击按钮

const classes = styles();

<Button className={classes.buttonWarning}>Hello</Button>

答案 8 :(得分：0)

这是打字稿实现的示例：

import React from "react";
import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
import capitalize from "lodash/capitalize";

import MuiButton, {
  ButtonProps as MuiButtonProps
} from "@material-ui/core/Button";

export type ColorTypes =
  | "primary"
  | "secondary"
  | "error"
  | "success"
  | "warning"
  | "default"
  | "inherit"
  | "info";

type ButtonProps = { color: ColorTypes } & Omit<MuiButtonProps, "color">;

const useStyles = makeStyles<Theme>(theme =>
  createStyles({
    outlinedSuccess: {
      borderColor: theme.palette.success.main,
      color: theme.palette.success.main
    },
    outlinedError: {
      borderColor: theme.palette.error.main,
      color: theme.palette.error.main
    },
    outlinedWarning: {
      borderColor: theme.palette.warning.main,
      color: theme.palette.warning.main
    },
    outlinedInfo: {
      borderColor: theme.palette.info.main,
      color: theme.palette.info.main
    },
    containedSuccess: {
      backgroundColor: theme.palette.success.main,
      color: theme.palette.success.contrastText,
      "&:hover": {
        backgroundColor: theme.palette.success.dark
      }
    },
    containedError: {
      backgroundColor: theme.palette.error.main,
      color: theme.palette.error.contrastText,
      "&:hover": {
        backgroundColor: theme.palette.error.dark
      }
    },
    containedWarning: {
      backgroundColor: theme.palette.warning.main,
      color: theme.palette.warning.contrastText,
      "&:hover": {
        backgroundColor: theme.palette.warning.dark
      }
    },
    containedInfo: {
      backgroundColor: theme.palette.info.main,
      color: theme.palette.info.contrastText,
      "&:hover": {
        backgroundColor: theme.palette.info.dark
      }
    }
  })
);

const Button: React.FC<ButtonProps> = ({ children, color, ...props }) => {
  const classes = useStyles();
  const className = classes?.[`${props.variant}${capitalize(color)}`];
  const colorProp =
    ["default", "inherit", "primary", "secondary"].indexOf(color) > -1
      ? (color as "default" | "inherit" | "primary" | "secondary")
      : undefined;

  return (
    <MuiButton {...props} color={colorProp} className={className}>
      {children}
    </MuiButton>
  );
};

Button.displayName = "Button";

export default Button;

使用此功能，您可以<Button variant="contained" color="success">进行自动填充和免费警告：）

答案 9 :(得分：-2)

更改按钮颜色的最简单方法是添加“样式”属性。这是我创建的绿色按钮的示例：

import Button from '@material-ui/core/Button';

  <Button 
    variant="contained" 
    color="primary" 
    style={{ backgroundColor: '#357a38' }}
  >
    Run
  </Button>
相关问题
最新问题