我现在正在迁移到新版本的 Material UI。我不得不说我有点困惑如何覆盖类。
我需要使用Stepper https://material-ui-next.com/demos/stepper/使用替代标签,它对我有用,我能够覆盖根类来设置透明背景。
但我需要的是将步骤图标大小设置为 42px,但我没有成功。
我的代码看起来:
const styles = {
root: {
backgroundColor: "rgba(255, 0, 0, 0)",
}
};
const MyStepper = (props) => {
return (
<Stepper
activeStep={props.activeStep}
alternativeLabel
classes={{
root: props.classes.root,
}}
>
{props.children}
</Stepper>
);
}
const StyledStepper = withStyles(styles)(MyStepper);
export default class CheckoutStepper extends React.PureComponent<ICheckoutStepperProps, {}> {
public render() {
return <div >
<StyledStepper
activeStep={this.props.step}
>
<Step>
<StepLabel>
{stepTable[0].label}
</StepLabel>
</Step>
<Step>
<StepLabel>
{stepTable[1].label}
</StepLabel>
</Step>
<Step >
<StepLabel>{stepTable[2].label}</StepLabel>
</Step>
<Step>
<StepLabel>{stepTable[3].label}</StepLabel>
</Step>
</StyledStepper>
</div>;
}
}
我确信我必须设置 StepLabel 的样式,但是当我尝试将 coor 设置为根图标时消失。
非常感谢您的帮助。
看起来设置了更改步进器图标大小的唯一方法transform: scale(scaleValue)
. Check 这个代码沙盒 https://codesandbox.io/s/qpo766399 (demo.js
文件)。注意下面的代码:
const styles = theme => ({
root: {
width: '90%',
},
backButton: {
marginRight: theme.spacing.unit,
},
instructions: {
marginTop: theme.spacing.unit,
marginBottom: theme.spacing.unit,
},
iconContainer: { // define styles for icon container
transform: 'scale(2)',
}
});
...
<Stepper activeStep={activeStep} alternativeLabel>
{steps.map((label, index) => {
return (
<Step key={label}>
<StepLabel classes={{ // apply this style
iconContainer: classes.iconContainer
}}>{label}</StepLabel>
</Step>
);
})}
</Stepper>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)