react antd 样式覆盖（自定义样式）

React.js学习, 简书项目 本文总阅读量次

自定义antd组件部分样式

有几种方式可以自定义antd组件部分样式，使用Styled Components定义样式的项目可以参考方法1或者方法2，使用css文件定义样式的项目可以参考方法3。

方法1：自定义组件包裹antd组件（Styled Components）

方法2：antd组件引用css.js中输出的自定义样式（声明样式）

参考方法2：直接在存放css样式的js文件中输出样式,再在js文件中引入样式并使用即可：

1
2
3
4
5
6
//css.js
import  styled  from 'styled-components';

export const btnStyle = {
　　background:'pink'
}
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import { Button } from 'antd'; 
import { btnStyle } from './style'

const TodoListUI = (props) => {
    return (
            <Button style={btnStyle}type="danger" onClick={props.handleBtnClick}>提交</Button>
    )
}
export default TodoListUI;

方法3：antd组件内联css样式（行内样式）

如下方例子展示

原因

原本的项目中，我是自定义组件Header的，后来想用antd来做响应式，Header的外层组件HeaderWrapper就被改成了antd提供的Row，虽然antd提供的Header组件可以实现固定位置，但它自带默认样式，而我想继续沿用自己的Header组件的样式，所以就打算在header/index.js中单独给Row一个自定义样式实现固定位置并显示在最上层

原本的自定义组件的样式

header/style.js：

1
2
3
4
5
6
7
8
9
import styled from "styled-components";
import LogoPic from "../../statics/logo.png";

export const HeaderWrapper = styled.div`
  z-index: 1;
  position:relative;
  height:56px;
  border-bottom:1px solid #f0f0f0;
`;

使用antd后给Row单独定义部分样式（行内样式）

header/index.js：

1
<Row style={{ position:"relative",zIndex: 1,height:"56px",borderBottom:"1px solid #f0f0f0" }}>

补充：react中css的定义方法

  • 注意：行内样式和声明样式中，样式名都是驼峰命名法，值需要引号。而Styled Components的模板字符串内使用的与原生CSS是一样的。
  • 参考

行内样式

  • 如上所示，在antd提供的组件中可使用style={{ ...}}来自定义样式，最外层{}表示是一个js表达式，里面的{}表示是一个js对象
  • 注意： ;与,的转变、react中css样式名采用驼峰命名法 、值 需要引号

声明样式

声明样式其实是行内样式的一种改进写法，在render函数外部创建style对象，然后传递给组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

class App extends React.Component {
 
//...
 
 const style1={    
      background:'#eee',
      width:'200px',
      height:'200px'
    }
 
  const style2={    
      color:'red',
      fontSize:'40px'
    }
 
  render() {
    return (
      <div style={style1}>
        <p style= {style2}>行内样式</p>
      </div>
    )
  }
}

CSS Modules

可参考阮一峰的CSS Modules

Styled Components

Styled Component是react的一个第三方库，是CSS in JS 的优秀实践和代表，将CSS写在JS中，可以实现常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。样式书写将直接依附在JSX上面，HTML、CSS、JS三者再次内聚，同时也实现H5的语义化标签表现形式。

React.js学习, 简书项目