antdesignpro（六）样式
⼀、概述
  基础的 CSS 知识或查阅属性，可以参考。
⼆、详细介绍
2.1、less
  Ant Design Pro 默认使⽤ less 作为样式语⾔，建议在使⽤前或者遇到疑问时学习⼀下的相关特性。
2.2、css modules 
  在样式开发过程中，有两个问题⽐较突出：
  全局污染 —— CSS ⽂件中的选择器是全局⽣效的，不同⽂件中的同名选择器，根据 build 后⽣成⽂件中的先后顺序，后⾯的样式会将前⾯的覆盖；
  选择器复杂 —— 为了避免上⾯的问题，我们在编写样式的时候不得不⼩⼼翼翼，类名⾥会带上限制范围的标识，变得越来越长，多⼈开发时还很容易导致命名风格混乱，⼀个元素上使⽤的选择器个数也可
能越来越多。
  为了解决上述问题，我们的脚⼿架默认使⽤ CSS Modules 模块化⽅案，先来看下在这种模式下怎么写样式。
// example.js
import styles from './example.less';
export default ({ title }) => <div className={styles.title}>{title}</div>;
// example.less
.title {
color: @heading-color;
font-weight: 600;
margin-bottom: 16px;
}
⽤ less 写样式好像没什么改变，只是类名⽐较简单（实际项⽬中也是这样），js ⽂件的改变就是在设置 className 时，⽤⼀个对象属性取代了原来的字符串，属性名跟 less ⽂件中对应的类名相同，对象从 less ⽂件中引⼊。
局部样式与全局样式
  在上⾯的样式⽂件中，.title只会在本⽂件⽣效，你可以在其他任意⽂件中使⽤同名选择器，也不会对这⾥造成影响。不过有的时候，我们就是想要⼀个全局⽣效的样式呢？可以使⽤:global。
// example.less
.title {
color: @heading-color;
font-weight: 600;
margin-bottom: 16px;
}
/
* 定义全局样式 */
:global(.text) {
font-size: 16px;
}
/* 定义多个全局样式 */
:global {
.footer {
color: #ccc;
}
.sider {
background: #ebebeb;
}
}
CSS Modules 的基本原理
  CSS Modules 的基本原理很简单，就是对每个类名（⾮ :global 声明的）按照⼀定规则进⾏转换，保证它的唯⼀性。如果在浏览器⾥查看这个⽰例的 dom 结构，你会发现实际渲染出来是这样的：
<div class="title___3TqAx">title</div>
类名被⾃动添加了⼀个 hash 值，这保证了它的唯⼀性。
除了上⾯的基础知识，还有⼀些关键点需要注意：
CSS Modules 只会对className以及id进⾏转换，其他的⽐如属性选择器，标签选择器都不进⾏处理，推荐尽量使⽤ className。
由于不⽤担⼼类名重复，你的 className 可以在基本语意化的前提下尽量简单⼀点⼉。
上⾯只对 CSS Modules 进⾏了最基础的介绍，有兴趣可以参考其他⽂档：
2.3、样式⽂件类别
在⼀个项⽬中，样式⽂件根据功能不同，可以划分为不同的类别。
src/index.less
全局样式⽂件，在这⾥你可以进⾏⼀些通⽤设置，⽐如脚⼿架中⾃带的：
html, body, :global(#root) {
height: 100%;
}
body {
text-rendering: optimizeLegibility;
css 属性选择器-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// temporary font size patch
:global(.ant-tag) {
font-size: 12px;
}
因为 antd 中会⾃带⼀些全局设置，如字号，颜⾊，⾏⾼等，所以在这⾥，你只需要关注⾃⼰的个性化需求即可，不⽤进⾏⼤量的 reset。src/utils/utils.less
这⾥可以放置⼀些⼯具函数供调⽤，⽐如清除浮动.clearfix。
模块样式
针对某个模块/页⾯⽣效的⽂件。
通⽤模块级
例如src/layouts/BasicLayout.less，⾥⾯包含⼀些基本布局的样式，被src/layouts/BasicLayout.js引⽤，项⽬中使⽤这种布局的页⾯就不需要再关⼼整体布局的设置。如果你的项⽬中需要使⽤其他布局，也建议将布局相关的 js 和 less 放在这⾥src/layouts。
页⾯级
具体页⾯相关的样式，例如src/routes/Dashborad/Monitor.less，⾥⾯的内容仅和本页⾯的内容相关。⼀般情况下，如果不是页⾯内容特别复杂，有了前⾯全局样式、通⽤模块样式的配合，这⾥要写的应该不多。
组件级
这个也很简单，就是组件相关的样式了，有⼀些在页⾯中重复使⽤的⽚段或相对独⽴的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，⽽不是混淆在页⾯⾥。
以上样式类别都是针对独⽴的样式⽂件，有时样式配置特别简单，也没有重复使⽤，你也可以⽤内联样式style={{ ... }}来设置。
2.4、覆盖组件样式
由于业务的个性化需求，我们经常会遇到需要覆盖组件样式的情况，这⾥举个简单的例⼦。
antd Select 在多选状态下，默认会展⽰所有选中项，这⾥我们给它加⼀个限制⾼度，超过此⾼度就出滚动条。
// TestPage.js
import { Select } from 'antd';
import styles from './TestPage.less'
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
<Select
mode="multiple"
style={{ width: 300 }}
placeholder="Please select"
className={styles.customSelect}
>
{children}
</Select>
, mountNode);
// TestPage.less
.customSelect {
:global {
.
ant-select-selection {
max-height: 51px;
overflow: auto;
}
}
}
⽅法很简单，有两点需要注意：
引⼊的 antd 组件类名没有被 CSS Modules 转化，所以被覆盖的类名.ant-select-selection必须放到:global中。
因为上⼀条的关系，覆盖是全局性的。为了防⽌对其他 Select 组件造成影响，所以需要包裹额外的 className 限制样式的⽣效范围。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。