006-ant design pro style

I. Overview

　　See address: https://pro.ant.design/docs/style-cn

　　For basic CSS knowledge or to view properties, you can refer to the MDN documentation .

2. Detailed introduction

2.1、less

Ant Design Pro uses less as the style language by default. It is recommended to learn the related features of less　　before using it or when in doubt .

2.2、css modules　　

　　In the style development process, there are two prominent problems:

- 　　Global pollution - selectors in CSS files are globally effective. For selectors with the same name in different files, the latter styles will overwrite the former ones according to the sequence in the generated files after build;
- 　　The selector is complex - in order to avoid the above problems, we have to be careful when writing the style. The class name will be marked with a limited scope, which will become longer and longer, and it is easy to cause confusion in the naming style when multiple people develop. , the number of selectors used on an element may also increase.

　　In order to solve the above problems, our scaffolding uses the CSS Modules modularization scheme by default. Let's first look at how to write styles in this mode.

// 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;
}

　　It seems that there is no change in writing style with less, but the class name is relatively simple (the same is true in the actual project). The change of the js file is to replace the original string with an object attribute when setting the className, and the attribute name corresponds to the less file. The class names are the same, and the objects are imported from the less file .

Local and global styles

　　In the above style file, it .title only takes effect in this file. You can use the same name selector in any other file, and it will not affect it here. But sometimes, we just want a style that takes effect globally? can be used :global.

// example.less
.title {
  color: @heading-color;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Define global styles */
:global(.text) {
  font-size: 16px;
}

/* define multiple global styles */
:global {
  .footer {
    color: #ccc;
  }
  .pages {
    background: #ebebeb;
  }
}

Fundamentals of CSS Modules

　　The basic principle of CSS Modules is very simple, that is, to convert each class name (not declared by :global) according to certain rules to ensure its uniqueness. If you look at the dom structure of this example in a browser, you will find that the actual rendering looks like this:

<div class="title___3TqAx">title</div>

The class name is automatically added with a hash value, which guarantees its uniqueness.

In addition to the basics above, there are some key points to note:

CSS Modules will only convert className and id , other such as attribute selectors, tag selectors are not processed, it is recommended to use className as much as possible.
Since you don't have to worry about duplication of class names, your className can be as simple as possible under the premise of basic semantics.

The above only provides the most basic introduction to CSS Modules. If you are interested, you can refer to other documents:

2.3, style file category

In a project, style files can be divided into different categories according to different functions.

src/index.less

Global style file, where you can make some common settings, such as the one that comes with scaffolding:

html, body, :global(#root) {
  height: 100%;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// temporary font size patch
:global(.ant-tag) {
  font-size: 12px;
}

Because antd will come with some global settings, such as font size, color, line, etc., so here, you only need to pay attention to your own personalized needs without doing a lot of resets.

src/utils/utils.less

Some utility functions can be placed here for calling, such as clearing floats .clearfix.

module style

A file valid for a module/page.

common module level

For example src/layouts/BasicLayout.less, it contains some basic layout styles, which are src/layouts/BasicLayout.js referenced. Pages using this layout in the project do not need to care about the overall layout settings. If you need to use other layouts in your project, it is also recommended to put layout-related js and less here src/layouts.

page level

The style related to the specific page, for example src/routes/Dashborad/Monitor.less, the content inside is only related to the content of this page. Under normal circumstances, if the page content is not particularly complex, with the cooperation of the previous global style and general module style, there should be not much to write here.

component level

This is also very simple. It is the style related to the component. There are some fragments or relatively independent functions that are reused in the page. You can extract them into components. The related styles should also be extracted and placed in the components, not confused on the page. inside.

The above style categories are all for independent style files. Sometimes the style configuration is very simple, and there is no repeated use. You can also use inline styles style={{ ... }} to set them.

2.4. Override component styles

Due to the personalized needs of the business, we often encounter situations where we need to override the component style. Here is a simple example.

antd Select In the multi-select state, all selected items will be displayed by default. Here we add a limit height to it, and the scroll bar will appear if the height exceeds this height.

// 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>);
}

ReactDOM.render(
  <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;
    }
  }
}

The method is very simple, there are two points to note:

The imported antd component class names are not converted by CSS Modules, so the overridden class names .ant-select-selection must be placed :global in .
Because of the relationship of the previous item, coverage is global. In order to prevent the impact on other Select components, it is necessary to wrap the extra className to limit the effective scope of the style.