react 通过导入(import)指令引入其他样式表的内容。

原创已于 2022-11-03 11:02:02 修改 · 373 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-11-02 16:32:45 首次发布

react 通过导入(import)指令引入其他样式表的内容专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Ant Design (AntD) 框架进行样式定制，通过导入指令引入其他样式表，并展示了如何覆盖默认组件样式的具体实现。

参考

Import styles from other style sheets——官方定义

解释：通过导入指令引入其他样式表的内容。

在修改antd 默认组件的一些样式的时候添加 :global

import styles from './style.less';
const config ={};
<div className={styles.UploadWrapper}>
  <Upload {...config} />
</div>

.UploadWrapper{
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    :global {
      .ant-upload-list-picture-card .ant-upload-select-picture-card {
        width: 186px;
        height: 105px;
      }

      .ant-upload-list-picture-card-container {
        width: 186px;
        height: 105px;
      }
    }
}