less中使用global的两种用法_less :global

less中使用global的两种用法

不再嵌套模块化的class时

• 直接使用 :global 嵌套

:global{
  .ant-card{
    background: #61dafb;
    .ant-card-body{
      background: red;
      opacity: 0.1;

    }
  }
}
1
2
3
4
5
6
7
8
9
10

嵌套模块化的class时

• 将属性用:global（）包裹

:global(.ant-collapse-content-box) {
  height: 150px;
  .content {
    color: red;
  }

}
1
2
3
4
5
6
7

例子

import React from 'react'

import styles from './style.less'
import {Card, Collapse} from "antd";


const Example: React.FC<any> = () => { //FC尖括号里面如果父组件传下来有props如name 可写const Example: React.FC<{name:string}> = () => {

  const {Panel} = Collapse;
  return (
    <div className={styles.page}>
      <Collapse  defaultActiveKey={['1']}>
        <Panel header="嵌套模块化的class" key="1">
          <div className={styles.content}>
            此 content属性为嵌套后的
          </div>
        </Panel>

      </Collapse>
      <Card title="不嵌套模块化的class" extra={<a href="#">More</a>} style={{ width: 300 }}>
        <p>Card content</p>
        <p>Card content</p>
        <p>Card content</p>
      </Card>
    </div>)
}

export default Example;

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

// style.less
:global(.ant-collapse-content-box) {
  height: 150px;

  .content {
    color: red;
  }

}

:global{
  .ant-card{
    background: #61dafb;
    .ant-card-body{
      background: red;
      opacity: 0.1;

    }
  }
}

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