[英]Material-UI styling the button variant outlined
I'm new to Material UI and I'm struggling.我是 Material UI 的新手,我很挣扎。 I have a button component
我有一个按钮组件
export default function TheButton(props: PropsWithChildren<Props>) {
const { className, hover, level,...rest } = props;
const classes = useStyles();
return (
<Button
{...rest}
className={clsx(classes.root, className, hover === 'contained' && classes.hoverContained)}
>
{props.children}
</Button>
);
}
From this component, I'd like to have two variants: contained and outlined.从这个组件中,我想有两个变体:包含和概述。 Here is my outlined button.
这是我的概述按钮。
<TheButton
variant="outlined"
color="secondary"
>
secondary
</TheButton>
When the variant outlined is selected the button has the class Muibutton-outlined. When the variant outlined is selected the button has the class Muibutton-outlined. I'd like to override this class to change the border (only in the outlined variant, so only on this class).
我想覆盖此 class 以更改边框(仅在概述的变体中,因此仅在此类上)。 So far I've tried something like:
到目前为止,我已经尝试过类似的东西:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
'.MuiButton-outlinedSecondary':{
border:"2px solid red" ,
},
}
)
It doesn't work.它不起作用。
I have a similar setting, and I tried:我有一个类似的设置,我试过:
submit
to my button componentsubmit
到我的按钮组件<Button
type="submit"
variant="outlined"
disabled={isSaving || invalid || unchanged}
color="secondary"
className={classes.submit}
>
SAVE CHANGES
</Button>
submit
class I can be more precise in my styling like so:submit
class 我可以更精确地设置我的样式,如下所示:const useStyles = makeStyles({
submit: {
marginTop: padding.medium,
marginLeft: padding.small,
'&.MuiButton-outlinedSecondary': {
border: '1px solid pink',
},
},
});
Here is the result:结果如下:
Material-ui button with pink border image Material-ui 按钮带有粉红色边框图像
As long as I have used Ant design ui kit and I have overrided styles on its default style like this:只要我使用了 Ant 设计 ui 套件,并且我已经在其默认样式上覆盖了 styles,如下所示:
<Button type="primary" className={styles.custom_css}>click</Button>
This has done in react and custom_css class overrides its styles on default这已在 react 中完成,custom_css class 默认覆盖其 styles
This might can help you, if not please let me know这可能对你有帮助,如果没有,请告诉我
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.