如何解决我想更改 chakra ui 按钮的默认样式
我正在使用查克拉用户界面。
我想将按钮颜色更改为 #2477b3。
我可以通过在props中传递值来改变它,但是每次在props中传递值都需要花费大量的时间和精力,所以我想改变默认的Button颜色等
我想使用A按钮的样式。
我改了theme.ts,创建了一个BButton,但是样式没变。
我尝试更改theme.ts中的值,但颜色没有改变。
<Button
size={'sm'}
bg="#2B6CB0"
_hover={{ bg: '#2477b3' }}
_active={{
bg: '#2477b3',transform: 'scale(0.98)',borderColor: '#2477b3',}}
color={'#ffffff'}
>
AButton
</Button>
<Button>BButton</Button>
theme.ts
import { extendTheme } from '@chakra-ui/react';
export const theme = extendTheme({
components: {
Button: {
baseStyle: {
fontWeight: 'bold',_hover: {
_disabled: {
bg: '#2477b3',},variants: {
bg: '#2B6CB0',_active: {
bg: '#2477b3',});
解决方法
您需要首先正确定义主题覆盖,方法是设置一个变体,然后将默认值设置为该变体
import { extendTheme } from '@chakra-ui/react';
export const theme = extendTheme({
components: {
Button: {
baseStyle: {
// ...define your base styles
},variants: {
// Make a variant,we'll call it `base` here and leave it empty
base: {},secondary: {
//...define other variants
}
},defaultProps: {
// Then here we set the base variant as the default
variant: 'base'
}
},},});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。