溪客(编程代码)

内联样式

<div style={{textAlign:'center',color:'red'}}></div>

style接收一个对象，对象的属性名就是style的属性名

需要注意的是，style的属性名可以使用横杠分割，如text-align，而对象的属性名不行，所以需要转换一下，使用驼峰式，变为 textAlign

由于接收的是对象，所以可以定义一个变量来传入，如下所示

const ss = {textAlign:'center',color:'red'}

<div style={ss} ></div>

使用class

<div className='class1 class2'></div>

如上所示，使用className，为什么？因为class在js中是保留字

使用参数

const myClass = 'class1';
myClass += ' class2'

<div className={myClass }></div>

使用classNames

这个是一个插件，首先需要安装

`yarn add classnames`

使用

import classnames from 'classnames'
import React, { useState, useRef } from 'react';

const [isShow , setIsShow] = useState<boolean>(false);
<div className={classNames('class1',{'class2': true,'class3': isShow }}></div>

使用参数

import classnames from 'classnames'
import React, { useState, useRef } from 'react';

const [isShow , setIsShow] = useState<boolean>(false);
const myclass = classNames('class1',{
    'class2': true,
    'class3': isShow 
});
<div className={myclass}></div>

umi中使用module方式

import styles from './index.less';

<div className={ styles.myClass }></div>

结合classnames

const inputClass = classNames(styles.input, {
    [styles.show]: searchMode,
  });
<div className={inputClass} ></div>

样式的覆盖

有时候需要对第三方组件的样式进行覆盖，可如下操作

import './index.less'

index.less文件

.ant-list-items {
  margin-left: 0px !important;
}

.ant-list-item {
  padding-left: 0px !important;
}

.ant-list-item:hover {
  background: #f0f0f0 !important;
}

使用 styled-components

第三方组件，待编写

使用 styled-jsx

第三方组件，待编写