Материал UI Core для ReactJS
Документация очень хорошая.Я обновил свой ответ, чтобы учесть конкретные потребности этого вопроса.Я также включил два общих решения для тех, кто сталкивается с этим вопросом.
Специальное решение:
Изменяет цвет фона кнопки с classes.buttonDefaultRoot (цвет, определяемый владельцем вопроса) на градиент, определенный владельцем этого вопроса.
Первый шаг, сохранить переменную в состоянии.Вы можете называть это как хотите, но я звоню bgButton.Установите это значение на this.props.classes.buttonDefaultRoot следующим образом:
state = {
bgButton: this.props.classes.buttonDefaultRoot,
}
Далее вы хотите определить свою функцию, которая будет обрабатывать щелчок.Опять же, называйте это как хотите.Я назову это handleClick.
handleClick = () => {
const { classes } = this.props; //this grabs your css style theme
this.setState({ bgButton: classes.parentRoot.auxClass }); //accessing styles
};
Здесь происходит несколько вещей.Во-первых, я разрушаю реквизит.Итак, я создаю новую переменную const с именем classes, которая имеет то же значение, что и this.props.classes.classes содержит набор объектов, которые определяют ваши стили css для ваших кнопок, полей и т. Д. Вы можете получить доступ к этим стилям так же, как если бы вы пытались получить значение проп в obj.
В этом случае вы можете получить доступ к стилю кнопок, набрав classes.buttonDefaultRoot.Это заботится о вашей функции нажатия ручки.
Последний шаг: визуализация кнопки.В вашем методе рендеринга вы хотите получить bgButton из состояния следующим образом:
render() {
const { bgButton } = this.state;
Затем вы хотите назначить className вашей кнопки на bgButton и добавить функциональность onClick, напримерэто (это следует из основной документации пользовательского интерфейса материала):
<Button variant="contained" color="primary" className={classNames(bgButton)} onClick={this.handleClick}>Button Name</Button>
Собрав все это вместе, вы получите:
import React, { Component } from "react";
import Button from "@material-ui/core/Button";
import PropTypes from "prop-types";
import classNames from "classnames";
import { withStyles } from "@material-ui/core/styles";
export default theme => ({ ... }) //not going to copy all of this
class MyButton extends Component {
state = {
bgButton: null
};
handleClick = () => {
const { classes } = this.props;
this.setState({ bgButton: classes.parentRoot.auxClass });
};
render() {
const { bgButton } = this.state;
return (
<div className={classes.container}>
<Button
variant="contained"
color="primary"
className={classNames(bgButton)}
onClick={this.handleClick}
>
Custom CSS
</Button>
</div>
);
}
}
MyButton.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(MyButton);
Общее решение
Это решение для тех, кто хочет использовать предопределенные цвета, то есть по умолчанию, основной, дополнительный, наследовать.Эта реализация не нуждается в импорте PropTypes или className.Это изменит цвет от предопределенного синего до предопределенного розового.Вот и все.
state = {
bgButton: "primary",
}
handleClick = () => {
this.setState({ bgButton: "secondary" });
}
render() {
const { bgButton } = this.state;
return(
...
<Button
onClick = {this.handleClick}
variant = "contained" //checked Material UI documentation
color={bgButton}
> ..etc.
Общее решение 2
Чтобы приспособить свои пользовательские стили к кнопке, вам придется импортировать PropTypes и classNames и использовать аналогичный подход в качестве специализированного решения.выше.Единственной разницей здесь будет мой синтаксис и имя класса.Я внимательно слежу за документацией, чтобы вы могли легко следить за ней и при необходимости корректировать ее.
import React, { Component } from "react";
import Button from "@material-ui/core/Button";
import PropTypes from "prop-types";
import classNames from "classnames";
import { withStyles } from "@material-ui/core/styles";
import purple from "@material-ui/core/colors/purple";
const styles = theme => ({
container: {
display: "flex",
flexWrap: "wrap"
},
margin: {
margin: theme.spacing.unit
},
cssRoot: {
color: theme.palette.getContrastText(purple[500]),
backgroundColor: purple[500],
"&:hover": {
backgroundColor: purple[700]
}
},
bootstrapRoot: {
boxShadow: "none",
textTransform: "none",
fontSize: 16,
padding: "6px 12px",
border: "1px solid",
backgroundColor: "#007bff",
borderColor: "#007bff",
fontFamily: [
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
"Roboto",
'"Helvetica Neue"',
"Arial",
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"'
].join(","),
"&:hover": {
backgroundColor: "#0069d9",
borderColor: "#0062cc"
},
"&:active": {
boxShadow: "none",
backgroundColor: "#0062cc",
borderColor: "#005cbf"
},
"&:focus": {
boxShadow: "0 0 0 0.2rem rgba(0,123,255,.5)"
}
}
});
class MyButton extends Component {
state = {
bgButton: null
};
handleClick = () => {
const { classes } = this.props;
this.setState({ bgButton: classes.cssRoot });
};
render() {
const { classes } = this.props; //this gives you access to all styles defined above, so in your className prop for your HTML tags you can put classes.container, classes.margin, classes.cssRoot, or classes.bootstrapRoot in this example.
const { bgButton } = this.state;
return (
<div className={classes.container}>
<Button
variant="contained"
color="primary"
className={classNames(bgButton)}
onClick={this.handleClick}
>
Custom CSS
</Button>
</div>
);
}
}
MyButton.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(MyButton);
Совет.Вам больше не нужен конструктор или связывать методы.
Надеюсь, это поможет.