Button：自定义主题后，danger Button 颜色不正确 #1807

vczyh · 2023-12-21T08:05:37Z

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.3.2

平台

weapp

重现链接

https://github.com/vczyh/taro-nutui-test/tree/loading-button-color

重现步骤

export default function Index() {

  return (
    <ConfigProvider theme={{
      nutuiColorPrimary: '#1677ff',
      nutuiColorPrimaryStop1: '#1677ff',
      nutuiColorPrimaryStop2: '#1677ff',
    }}
    >
      <Button type='danger'>Danger</Button>
    </ConfigProvider>
  )
}

期望的结果是什么？

虽然自定义 brand 颜色为蓝色， danger type button 按钮依然应该是偏红色

实际的结果是什么？

环境信息

No response

其他补充信息

No response

Me-UserName · 2023-12-21T08:23:17Z

使用 CSS Variables 进行主题配置 --nutui-brand-8: #1677ff，Primary Button 颜色仍然为京东红，2.3.2版

oasis-cloud · 2023-12-22T01:44:35Z

使用 CSS Variables 进行主题配置 --nutui-brand-8: #1677ff，Primary Button 颜色仍然为京东红，2.3.2版

Primary Button 的背景色是采用的渐变模式，可以修改 $color-primary-stop-1和 $color-primary-stop-2。色值之间还不具备联动逻辑。

oasis-cloud · 2023-12-22T01:47:57Z

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.3.2

平台

weapp

重现链接

vczyh/taro-nutui-test@loading-button-color

重现步骤
export default function Index() {

  return (
    <ConfigProvider theme={{
      nutuiColorPrimary: '#1677ff',
      nutuiColorPrimaryStop1: '#1677ff',
      nutuiColorPrimaryStop2: '#1677ff',
    }}
    >
      <Button type='danger'>Danger</Button>
    </ConfigProvider>
  )
}
期望的结果是什么？

虽然自定义 brand 颜色为蓝色， danger type button 按钮依然应该是偏红色

实际的结果是什么？

环境信息

No response

其他补充信息

No response

你应该在你的主题中修改 $color-danger，或者修改 --nutui-color-danger。像下面这样

  nutuiColorPrimary: '#1677ff',
  nutuiColorDanger: 'red',
  nutuiColorPrimaryStop1: '#1677ff',
  nutuiColorPrimaryStop2: '#1677ff',

vczyh · 2023-12-22T01:52:41Z

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.3.2

平台

weapp

重现链接

vczyh/taro-nutui-test@loading-button-color

重现步骤
export default function Index() {

  return (
    <ConfigProvider theme={{
      nutuiColorPrimary: '#1677ff',
      nutuiColorPrimaryStop1: '#1677ff',
      nutuiColorPrimaryStop2: '#1677ff',
    }}
    >
      <Button type='danger'>Danger</Button>
    </ConfigProvider>
  )
}
期望的结果是什么？

虽然自定义 brand 颜色为蓝色， danger type button 按钮依然应该是偏红色

实际的结果是什么？

环境信息

No response

其他补充信息

No response
你应该在你的主题中修改 $color-danger，或者修改 --nutui-color-danger。像下面这样
  nutuiColorPrimary: '#1677ff',
  nutuiColorDanger: 'red',
  nutuiColorPrimaryStop1: '#1677ff',
  nutuiColorPrimaryStop2: '#1677ff',

我有个疑问，为什么 success 等其他按钮有默认颜色，为什么 danger 的默认颜色就是 primary 呢，是不是默认也应该设置为 red 呢。

// 成功
$color-success: var(--nutui-color-success, #00bc14) !default;
$color-success-pressed: var(--nutui-color-success-pressed) !default;
$color-success-disabled: var(--nutui-color-success-disabled, #b2f0ae) !default;
$color-success-light: var(--nutui-color-success-light) !default;
$color-success-background: var(--nutui-color-success-background) !default;

// 警告
$color-warning: var(--nutui-color-warning, rgba(255, 158, 13, 1)) !default;
$color-warning-pressed: var(--nutui-color-warning-pressed) !default;
$color-warning-disabled: var(--nutui-color-warning-disabled, #fdd3b9) !default;
$color-warning-light: var(--nutui-color-warning-light) !default;
$color-warning-background: var(--nutui-color-warning-background) !default;

// 危险
$color-danger: var(--nutui-color-danger, $color-primary) !default;
$color-danger-pressed: var(--nutui-color-danger-pressed) !default;
$color-danger-disabled: var(
  --nutui-color-danger-disabled,
  $color-primary-disabled
) !default;

xiaoyatong · 2023-12-22T07:04:14Z

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.3.2

平台

weapp

重现链接

vczyh/taro-nutui-test@loading-button-color

重现步骤
export default function Index() {

  return (
    <ConfigProvider theme={{
      nutuiColorPrimary: '#1677ff',
      nutuiColorPrimaryStop1: '#1677ff',
      nutuiColorPrimaryStop2: '#1677ff',
    }}
    >
      <Button type='danger'>Danger</Button>
    </ConfigProvider>
  )
}
期望的结果是什么？

虽然自定义 brand 颜色为蓝色， danger type button 按钮依然应该是偏红色

实际的结果是什么？

环境信息

No response

其他补充信息

No response
你应该在你的主题中修改 $color-danger，或者修改 --nutui-color-danger。像下面这样
  nutuiColorPrimary: '#1677ff',
  nutuiColorDanger: 'red',
  nutuiColorPrimaryStop1: '#1677ff',
  nutuiColorPrimaryStop2: '#1677ff',

我有个疑问，为什么 success 等其他按钮有默认颜色，为什么 danger 的默认颜色就是 primary 呢，是不是默认也应该设置为 red 呢。

// 成功
$color-success: var(--nutui-color-success, #00bc14) !default;
$color-success-pressed: var(--nutui-color-success-pressed) !default;
$color-success-disabled: var(--nutui-color-success-disabled, #b2f0ae) !default;
$color-success-light: var(--nutui-color-success-light) !default;
$color-success-background: var(--nutui-color-success-background) !default;

// 警告
$color-warning: var(--nutui-color-warning, rgba(255, 158, 13, 1)) !default;
$color-warning-pressed: var(--nutui-color-warning-pressed) !default;
$color-warning-disabled: var(--nutui-color-warning-disabled, #fdd3b9) !default;
$color-warning-light: var(--nutui-color-warning-light) !default;
$color-warning-background: var(--nutui-color-warning-background) !default;

// 危险
$color-danger: var(--nutui-color-danger, $color-primary) !default;
$color-danger-pressed: var(--nutui-color-danger-pressed) !default;
$color-danger-disabled: var(
  --nutui-color-danger-disabled,
  $color-primary-disabled
) !default;

我觉得你说的有道理，我们修订一下。

vczyh · 2023-12-22T07:06:21Z

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.3.2

平台

weapp

重现链接

vczyh/taro-nutui-test@loading-button-color

重现步骤
export default function Index() {

  return (
    <ConfigProvider theme={{
      nutuiColorPrimary: '#1677ff',
      nutuiColorPrimaryStop1: '#1677ff',
      nutuiColorPrimaryStop2: '#1677ff',
    }}
    >
      <Button type='danger'>Danger</Button>
    </ConfigProvider>
  )
}
期望的结果是什么？

虽然自定义 brand 颜色为蓝色， danger type button 按钮依然应该是偏红色

实际的结果是什么？

环境信息

No response

其他补充信息

No response
你应该在你的主题中修改 $color-danger，或者修改 --nutui-color-danger。像下面这样
  nutuiColorPrimary: '#1677ff',
  nutuiColorDanger: 'red',
  nutuiColorPrimaryStop1: '#1677ff',
  nutuiColorPrimaryStop2: '#1677ff',

我有个疑问，为什么 success 等其他按钮有默认颜色，为什么 danger 的默认颜色就是 primary 呢，是不是默认也应该设置为 red 呢。

// 成功
$color-success: var(--nutui-color-success, #00bc14) !default;
$color-success-pressed: var(--nutui-color-success-pressed) !default;
$color-success-disabled: var(--nutui-color-success-disabled, #b2f0ae) !default;
$color-success-light: var(--nutui-color-success-light) !default;
$color-success-background: var(--nutui-color-success-background) !default;

// 警告
$color-warning: var(--nutui-color-warning, rgba(255, 158, 13, 1)) !default;
$color-warning-pressed: var(--nutui-color-warning-pressed) !default;
$color-warning-disabled: var(--nutui-color-warning-disabled, #fdd3b9) !default;
$color-warning-light: var(--nutui-color-warning-light) !default;
$color-warning-background: var(--nutui-color-warning-background) !default;

// 危险
$color-danger: var(--nutui-color-danger, $color-primary) !default;
$color-danger-pressed: var(--nutui-color-danger-pressed) !default;
$color-danger-disabled: var(
  --nutui-color-danger-disabled,
  $color-primary-disabled
) !default;

我觉得你说的有道理，我们修订一下。

点赞！

xiaoyatong · 2023-12-22T07:27:44Z

代码已合并~~

vczyh mentioned this issue Dec 21, 2023

fix(Button): incorrect color for danger #1809

Merged

20 tasks

oasis-cloud closed this as completed Dec 22, 2023

Button：自定义主题后，danger Button 颜色不正确 #1807

Button：自定义主题后，danger Button 颜色不正确 #1807

Comments

vczyh commented Dec 21, 2023

NutUI React 包名

NutUI React 版本号

平台

重现链接

重现步骤

期望的结果是什么？

实际的结果是什么？

环境信息

其他补充信息

Me-UserName commented Dec 21, 2023

oasis-cloud commented Dec 22, 2023

oasis-cloud commented Dec 22, 2023 • edited Loading

NutUI React 包名

NutUI React 版本号

平台

重现链接

重现步骤

期望的结果是什么？

实际的结果是什么？

环境信息

其他补充信息

vczyh commented Dec 22, 2023

NutUI React 包名

NutUI React 版本号

平台

重现链接

重现步骤

期望的结果是什么？

实际的结果是什么？

环境信息

其他补充信息

xiaoyatong commented Dec 22, 2023

NutUI React 包名

NutUI React 版本号

平台

重现链接

重现步骤

期望的结果是什么？

实际的结果是什么？

环境信息

其他补充信息

vczyh commented Dec 22, 2023

NutUI React 包名

NutUI React 版本号

平台

重现链接

重现步骤

期望的结果是什么？

实际的结果是什么？

环境信息

其他补充信息

xiaoyatong commented Dec 22, 2023

oasis-cloud commented Dec 22, 2023 •

edited

Loading