react里修改antd样式

Question

react里修改antd样式的方法？

想在react里修改antd样式，试了好几种方法都没有效果
比如我想修改 Radio.Button 点击选中的样式，变成粉色，左边框变粗，

<Radio.Group buttonStyle="solid">
     <Radio.Button value="a">Hangzhou</Radio.Button>
     <Radio.Button value="b">Shanghai</Radio.Button>
</Radio.Group>

方法一
引用less样式文件
在组件里 import './index.less，但是样式没有生效

方法二
className
import style from './index.less'

这种方法只能修改简单样式，稍微复杂没有效果

方法三
className
import classnamefrom 'classnames

同样修改不了复杂的 请问有什么好的方法能修改,能具体举个例子吗

Answer 1

参考GPT4，你参考下！
对于在 React 中修改 Ant Design 的样式，通常推荐使用 CSS 或者 Less(Sass) 来引入并覆盖原有的样式。以下是一些常用的方法：

内联样式（Inline styles）：对于简单的样式修改，最直接的方法就是通过 React 的内联样式直接修改。但是这种情况下只适合修改简单的样式，且不能修改伪类（如：:hover）。

<Radio.Button style={{ backgroundColor: 'pink' }} value="a">Hangzhou</Radio.Button>

CSS 或者 Less 文件覆盖：可以在项目中创建一个 css/less 文件，然后在其中编写样式以覆盖 Ant Design 自带的样式。然后在使用到的地方 import 引入即可。

比如想要修改 Radio.Button 选中的样式，可以这样做：
在样式文件（假设命名为 custom.less）中：

// 根据Ant Design 的样式结构，找到对应的选择器进行覆盖，以下是一个例子
.ant-radio-button-wrapper-checked {
  border-color: pink !important;
  background-color: pink !important;
}

然后在你的组件文件中引入这个样式文件：

import './custom.less';

这个方法可以实现对所有样式的修改，也包括了伪类。
注意，对复杂的样式需要使用 !important 来确保优先级，但是应尽量避免使用 !important ，因为这会破坏样式的层叠规则，可能会对其他地方产生副作用。

使用 Ant Design 的 className 属性：Ant Design 中大部分组件都接受 className 属性，可以通过这个属性给组件添加类名，然后在你的样式文件中对这个类名进行样式控制。

<Radio.Button className="customRadio" value="a">Hangzhou</Radio.Button>

然后在样式文件中定义 .customRadio 的样式。
以上就是一些在 React 中修改 Ant Design 样式的方法，你可以根据自己的实际需要选择合适的方法。