小编sat*_*esu的帖子

我想更改 chakra ui 按钮的默认样式

我正在使用 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>
Run Code Online (Sandbox Code Playgroud)

主题.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',
          transform: 'scale(0.98)',
          borderColor: '#2477b3',
        },
      },
    },
  },
});
Run Code Online (Sandbox Code Playgroud)

reactjs next.js chakra-ui

2
推荐指数
1
解决办法
7409
查看次数

标签 统计

chakra-ui ×1

next.js ×1

reactjs ×1