Javascript Material-ui @next 自定义按钮颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46486565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Material-ui @next customize button colors?
提问by Nema Ga
I am struggling to modify button colors in Material-UI@next (v1).
我正在努力修改 Material-UI@next (v1) 中的按钮颜色。
How would I set muitheme to behave similarity to bootstrap, so I could just use "btn-danger" for red, "btn-success" for green... ?
我如何将 muitheme 设置为与 bootstrap 相似，所以我可以只对红色使用“btn-danger”，对绿色使用“btn-success”......？
I tried with custom className but it doesn't work properly (hover color does't change) and it seems repetitive. What options do I have?
我尝试使用自定义 className 但它不能正常工作（悬停颜色不会改变）并且它似乎是重复的。我有哪些选择？
回答by alex marmon
I came up with this solution using Brendans answer in this thread. Hopefully it'll help someone in a similar situation.
我在这个线程中使用 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>
)
}
回答by Brendan McGill
There is a mistake with Bagelfp's answer, and some other things to consider;
Bagelfp 的回答有错误，还有其他一些需要考虑的事情；
First, 'error' is not a supported color theme in material-ui@next v1's Button component. Only 'default', 'inherit', 'primary' and 'secondary' are accepted by the color prop.
首先，“error”不是 material-ui@next v1 的Button 组件中支持的颜色主题。color prop只接受“default”、“inherit”、“primary”和“secondary”。
Here is the approach I have found to be the easiest so far. First, choose your two most common theme colors and place them at the root of your app.
这是迄今为止我发现的最简单的方法。首先，选择两种最常见的主题颜色并将它们放在应用程序的根目录中。
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>
);
}
}
Then in your Component, simply choose the theme with your desired color;
然后在您的组件中，只需选择您想要的颜色的主题；
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>
)
If you need a third and fourth color, you can simply export Component.js with a new pallete just like you did in App.js.
如果您需要第三种和第四种颜色，您可以像在 App.js 中一样简单地使用新调色板导出 Component.js。
This is the only solution I have found that allows me to retain the darkened hover effect (none of the official override examplesretain functioning hover). I really wish I could find a way to simply drop in a new theme color when calling Button, but for now this is the most simple way to do it.
这是我发现的唯一可以保留变暗悬停效果的解决方案（没有一个官方覆盖示例保留了悬停功能）。我真的希望我能找到一种方法，在调用 Button 时简单地放入新的主题颜色，但目前这是最简单的方法。
EDIT: My new preferred method is to create a CustomButton component using styled-components and material-ui buttonbase. I also place the styled-components theme provider at the root of my app alongside my MuiThemeProvider. This gives me easy access to additional theme colors in all my styled-components without importing and dropping in more ThemeProviders. In the case of my CustomButton, I just give it a themeprop, which is passed right down to the css in styled(ButtonBase). See the styled-component docs for more info.
编辑：我新的首选方法是使用 styled-components 和 material-ui buttonbase 创建一个 CustomButton 组件。我还将 styled-components 主题提供程序与我的 MuiThemeProvider 一起放在我的应用程序的根目录中。这使我可以轻松访问所有样式组件中的其他主题颜色，而无需导入和删除更多 ThemeProvider。在我的 CustomButton 的情况下，我只是给它一个theme道具，它直接传递给 .css 文件中的 css styled(ButtonBase)。有关更多信息，请参阅样式组件文档。
回答by Adnan shah
You can try this
你可以试试这个
<Button
style={{
borderRadius: 35,
backgroundColor: "#21b6ae",
padding: "18px 36px",
fontSize: "18px"
}}
variant="contained"
>
Submit
</Button>
回答by Bagelfp
You could create a themewith palettes defined for each of their 3 supported intentions(primary, secondary, error), and then use the colorprop on <Button>to use those. In your example the btn-dangercould be <Button color='error'>
您可以创建一个theme为每个支持的 3 个intentions（主要、次要、错误）定义的调色板，然后使用color道具<Button>来使用它们。在你的例子中btn-danger可能是<Button color='error'>
EDIT:Brendan's answer is correct here that erroris not supported for Button. According to the documentation Buttononly supports intentions that "make sense for this component.", so only primaryand secondarywould work here.
编辑：Brendan 的答案在这里是正确的，但error不支持Button. 根据该文件Button只支持意向，“对于这个组件是有意义的。”，所以只有primary和secondary将在这里工作。
From their docs(trimmed down a little here):
从他们的文档中（这里略有删减）：
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>
);
}
See Brendan's Answerfor a more realistic example of creating themes for your components.
有关为组件创建主题的更真实示例，请参阅Brendan 的回答。
回答by Farbod Aprin
first try to install npm install @material-ui/styles the apply styles according to material documentation, for react class component you can use below code:
首先尝试根据材料文档安装 npm install @material-ui/styles 应用样式，对于反应类组件，您可以使用以下代码：
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;
for more information with references please check my blog in medium. https://medium.com/@farbodaprin/how-to-make-a-customisable-material-ui-button-a85b6534afe5
有关参考资料的更多信息，请查看我的中等博客。 https://medium.com/@farbodaprin/how-to-make-a-customisable-material-ui-button-a85b6534afe5
回答by Juliano
Try this:
尝试这个：
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" />
});
Now you have a ButtonContainedError to use anywhere.
现在你有一个 ButtonContainedError 可以在任何地方使用。
And it is consistent with your theme.
并且与你的主题一致。
回答by Pathfinder
I found out that !importantworks in the classes. (React Hooks)
我发现!important在课堂上有效。（反应钩子）
const styles "...etc..." = (theme: Theme) => ({
buttonWarning: {
backgroundColor: theme.palette.warning.dark + '!important'
}
}))
Then in the button
然后在按钮
const classes = styles();
<Button className={classes.buttonWarning}>Hello</Button>
