less中使用global的两种用法

不负当下

已于 2022-08-12 17:53:18 修改

阅读量9k

点赞数

文章标签： less

于 2022-08-12 16:15:27 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45272209/article/details/126306454

版权

本文介绍在LESS预处理器中使用全局样式的两种方法：一种是在不嵌套模块化类时直接应用全局样式；另一种是在嵌套模块化类时，通过特定语法实现全局样式的指定。示例代码展示了如何在Ant Design组件上应用这些技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

less中使用global的两种用法

不再嵌套模块化的class时

直接使用 :global 嵌套

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

    }
  }
}

嵌套模块化的class时

将属性用:global（）包裹

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

}

例子

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;

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

    }
  }
}

请添加图片描述