Есть ли вероятность, что я смогу изменить цвет галочки (Tick) на черный с синим фоном в здесь в моем приложении реакции.
Вот код.
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import StepContent from '@material-ui/core/StepContent';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
},
button: {
marginTop: theme.spacing(1),
marginRight: theme.spacing(1),
},
actionsContainer: {
marginBottom: theme.spacing(2),
},
resetContainer: {
padding: theme.spacing(3),
},
}));
function getSteps() {
return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
}
function getStepContent(step) {
switch (step) {
case 0:
return `For each ad campaign that you create, you can control how much
you're willing to spend on clicks and conversions, which networks
and geographical locations you want your ads to show on, and more.`;
case 1:
return 'An ad group contains one or more ads which target a shared set of keywords.';
case 2:
return `Try out different ad text to see what brings in the most customers,
and learn how to enhance your ads using features like ad extensions.
If you run into any problems with your ads, find out how to tell if
they're running and how to resolve approval issues.`;
default:
return 'Unknown step';
}
}
export default function VerticalLinearStepper() {
const classes = useStyles();
const [activeStep, setActiveStep] = React.useState(0);
const steps = getSteps();
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleReset = () => {
setActiveStep(0);
};
return (
<div className={classes.root}>
<Stepper activeStep={activeStep} orientation="vertical">
{steps.map((label, index) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
<StepContent>
<Typography>{getStepContent(index)}</Typography>
<div className={classes.actionsContainer}>
<div>
<Button
disabled={activeStep === 0}
onClick={handleBack}
className={classes.button}
>
Back
</Button>
<Button
variant="contained"
color="primary"
onClick={handleNext}
className={classes.button}
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
</StepContent>
</Step>
))}
</Stepper>
{activeStep === steps.length && (
<Paper square elevation={0} className={classes.resetContainer}>
<Typography>All steps completed - you're finished</Typography>
<Button onClick={handleReset} className={classes.button}>
Reset
</Button>
</Paper>
)}
</div>
);
}
Я пытался сделать это в течение одного дня, и это то, что я делал до сих пор. Это близко к этому, но теперь я хочу скрыть значение по умолчанию, отмеченное моей иконкой. Пожалуйста, укажите мне в правильном направлении.
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Stepper from "@material-ui/core/Stepper";
import Step from "@material-ui/core/Step";
import StepLabel from "@material-ui/core/StepLabel";
import StepButton from "@material-ui/core/StepButton";
import StepIcon from "@material-ui/core/StepIcon";
import StepContent from "@material-ui/core/StepContent";
import DoneIcon from "@material-ui/icons/Done";
import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
const styles = theme => ({
root: {
width: "90%"
},
button: {
marginTop: theme.spacing.unit,
marginRight: theme.spacing.unit
},
actionsContainer: {
marginBottom: theme.spacing.unit * 2
},
resetContainer: {
padding: theme.spacing.unit * 3
},
connector: {
display: "none"
},
step: {
marginBottom: theme.spacing.unit * 5
},
iconContainer: {
transform: "scale(1.3)",
marginRight: theme.spacing.unit * 5
},
iconRoot: {
backgroundColor: "green",
color: "white",
borderRadius: "50%",
padding: 5
},
completed: {
color: "yellow"
// clipPath: "circle(50%)"
},
icon: {
backgroundColor: "#ccf9e9",
clipPath: "circle(50%)",
"& path": {
color: "black"
}
}
});
function getSteps() {
return ["Select campaign settings", "Create an ad group", "Create an ad"];
}
function getStepContent(step) {
switch (step) {
case 0:
return `For each ad campaign that you create, you can control how much
you're willing to spend on clicks and conversions, which networks
and geographical locations you want your ads to show on, and more.`;
case 1:
return "An ad group contains one or more ads which target a shared set of keywords.";
case 2:
return `Try out different ad text to see what brings in the most customers,
and learn how to enhance your ads using features like ad extensions.
If you run into any problems with your ads, find out how to tell if
they're running and how to resolve approval issues.`;
default:
return "Unknown step";
}
}
class VerticalLinearStepper extends React.Component {
state = {
activeStep: 0
};
handleNext = () => {
this.setState(state => ({
activeStep: state.activeStep + 1
}));
};
handleBack = () => {
this.setState(state => ({
activeStep: state.activeStep - 1
}));
};
handleReset = () => {
this.setState({
activeStep: 0
});
};
render() {
const { classes } = this.props;
const steps = getSteps();
const { activeStep } = this.state;
return (
<div className={classes.root}>
<Stepper
activeStep={activeStep}
orientation="vertical"
connector={false}
>
{steps.map((label, index) => {
return (
<Step key={label} className={classes.step}>
<StepIcon
icon={<DoneIcon classes={{ root: classes.icon }} />}
completed={index === 2}
/>
<StepLabel
classes={{
iconContainer: classes.iconContainer
}}
>
{label}
</StepLabel>
</Step>
);
})}
</Stepper>
<div>
<div>
<Button
disabled={activeStep === 0}
onClick={this.handleBack}
className={classes.button}
>
Back
</Button>
<Button
variant="contained"
color="primary"
onClick={this.handleNext}
className={classes.button}
>
{activeStep === steps.length - 1 ? "Finish" : "Next"}
</Button>
</div>
</div>
</div>
);
}
}
VerticalLinearStepper.propTypes = {
classes: PropTypes.object
};
export default withStyles(styles)(VerticalLinearStepper);