我想将禁用的Button
组件的全局样式从Material-UI
更改。但问题是我无法保持按钮的原始配色方案。
请看这个按钮:
<Button color="secondary" disabled={isLoading}>Create Account</Button>
现在默认情况下,Mui-disabled
将附加到此按钮。其color
和background-color
取自theme.palatte.action
属性。因此,此禁用按钮的CSS将为:
color: rgba(0,0,0,0.26);
box-shadow: none;
background-color: rgba(0,0,0,0.12);
但是我希望我禁用的按钮保持原来的颜色(“primary,secondary”,“error”等),并添加0.7
的不透明度。默认情况下,光标事件被MUI设置为无。
我尝试使用自定义主题,但我不知道如何保持按钮的原始颜色。例如,如果Button
是primary
,保持原色,如果Button
是secondary
,保持二次色。
MuiButton: {
styleOverrides: {
root: {
textTransform: "none",
boxShadow: "none",
"&.Mui-disabled": {
// background: "initial",
// color: "initial",
opacity: .7
}
},
}
}
当然,我不想为每个代码编写一个自定义代码。我甚至可以通过创建一个围绕MUI按钮的 Package 器并在代码中的任何地方使用该 Package 器来实现这一点。但我想通过重写主题来以MUI的方式实现这一点。
如何实施全球解决方案?
3条答案
按热度按时间of1yzvn41#
对于默认样式中处理禁用状态的方式,我认为您需要重新定义覆盖中的默认颜色,以便使其工作。
在源代码中,您可以找到如何为文本、轮廓和包含的变量定义默认颜色。
下面的示例演示了如何通过在
"&.Mui-disabled"
样式覆盖中重新定义未禁用的颜色来覆盖opacity: 0.7
的所有三个变体的禁用样式。gopyfrb32#
这是你想要的吗?只是不要在
palette
中设置disabledBackground
颜色:在我写这篇文章的时候,也有其他的components重用了
disableBackground
属性,请确保你看了一下,也同意了。我在下面的例子中展示了它们。现场演示
nxowjjhe3#
我现在有个好办法。
我使用
ownerState
props来获取颜色属性。接下来,我在主题的调色板中使用它。下面的示例演示了如何为contained
按钮执行此操作。