1、在Component的Radio中加个style={radioStyle}。

<RadioGroup>
<Radio style={radioStyle} value={}>多和他人谈话</Radio>
<Radio style={radioStyle} value={}>写下计划</Radio>>
</RadioGroup>

2、在style-components中写

export const radioStyle = {
display: 'block',
height: '30px',
lineHeight: '30px',
};

3、在Component中导入即可

import {
radioStyle,
} from './style';

4、注意两点

①要用style={radioStyle}而不是className

②注意写样式时,样式的值要加引号

完美修改antd的样式

在React中修改antd的样式的更多相关文章

  1. react中修改antd的默认样式

    最近在做react+antd项目.不可避免的遇到了修改antd默认样式的问题. 比如,table组件的表头背景色设置,如果直接使用元素样式,会修改整个项目的table.这里我用的方法是,给table添 ...

  2. react项目中使用less并修改antd主题样式

    一.react项目中使用less 1. 安装配置 npm i -D less less-loader 2. 查看webpack配置 npm run eject 此操作不可逆,生成新的目录. 3. 修改 ...

  3. react中怎么写css样式?

    JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...

  4. react中自定义antd主题与支持less(第二部)

    自定义主题 首先自定义主题需要修改antd,antd本身也是less写的之后编译成css的,所以当我们需要使用less. 1.yarn add react-app-rewire-less --dev ...

  5. input框中修改placeholder的样式

    有时间input标签的placeholder属性会出现问题,下面是修改placeholder的样式demo input::-webkit-input-placeholder{ color:red; f ...

  6. react中使用antd按需加载(第一部)

    什么是react按需加载?简单来说就是当我们引用antd的时候需要引入全局css样式,这会对性能造成一定的影响,那么使用按需加载以后就不需要引入css全局样式了,直接引入功能模块即可,既然需要设置按需 ...

  7. vue中修改Element ui样式不起作用

    公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...

  8. Qt中修改QtoolTip的样式

    Qt中的QtoolTip有几个需要注意的: 1.不能直在堆或栈中生成QToolTip对象.因为其构造函数为私有.2.从widget获取的tooltip不是tooltip对象,而是tooltip中的文本 ...

  9. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

随机推荐

  1. 第七章、Ajango自带auth模块

    目录 第七章.Ajango自带auth模块 一.什么是auth auth是django自带的用户认证模块 二.auth模块的常用方法 三.拓展默认的auth_user表 第七章.Ajango自带aut ...

  2. 二、MySQL介绍

    目录 一.MySQL背景 二.MySQL的优点 三.MySQL安装 四.MySQL服务的启动和停止 五.MySQL登录和退出 六.MySQL常用命令 (一)常用命令 (二)语法规范 (三)SQL语言细 ...

  3. Go语言根据数据表自动生成model以及controller代码

    手写model的用法请参考: https://www.jianshu.com/p/f5784b8c00d0 这里仅说明自动生成model文件的过程 bee generate appcode -tabl ...

  4. SiteOmat

    卡巴斯基实验室高级安全研究员Ido Naor和以色列安全研究员Amihai Neiderman在卡巴斯位于墨西哥坎昆举行的安全分析师峰会期间,就加油站的安全问题展开了全面分析.他们的研究表明,攻击者可 ...

  5. Hive正则表达式

    正则表达式基本语法 用圆括号将所有选择项括起来,相邻的选择项之间用|分隔.但用圆括号会有一个副作用,使相关的匹配会被缓存,此时可用?:放在第一个选项前来消除这种副作用. 其中 ?: 是非捕获元之一,还 ...

  6. 利用commands模块执行shell命令

    利用commands模块执行shell命令 用Python写运维脚本时,经常需要执行linux shell的命令,Python中的commands模块专门用于调用Linux shell命令,并返回状态 ...

  7. python+selenium之——错误:selenium.common.exceptions.WebDriverException: Message: ‘geckodriver’ executable needs to be in PATH.

    此时,需要自己配置geckodriver 下载geckodriver,地址:https://github.com/mozilla/geckodriver/releases 下载后解压得到geckodr ...

  8. ACM-ICPC 2019南昌网络赛I题 Yukino With Subinterval

    ACM-ICPC 2019南昌网络赛I题 Yukino With Subinterval 题目大意:给一个长度为n,值域为[1, n]的序列{a},要求支持m次操作: 单点修改 1 pos val 询 ...

  9. 如何避免重复安装AppiumSetting、Unlock以及Android ime

    老版本Appium(如1.4.16),找到如下路径(根据自己的安装路径找) C:\Program Files (x86)\Appium\node_modules\appium\lib\devices\ ...

  10. 部署lnmp

    装包 1.安装依赖包 yum - y install gcc openssl-devel pcre-devel zlib-devel 2.解源码包 .tar.gz 3.切换到解压缩后的目录,配置参数 ...