小编lil*_*ear的帖子

我正在尝试使用 CSS 模块来实现 ReactJs 项目的 CSS 样式，为此我应用了 ant design 文档（请参见此处：https: //pro.ant.design/docs/style），但不幸的是它不起作用。问题是我想重写ant Button的组件样式，但它没有获取样式。下面是我的代码的简短示例：CSS 类：在 MyContainer.less 文件中：

 .antButton{
    :global {
        .ant-btn-primary {
            background-color: rgb(215, 226, 233);
            border-color: #848586;
            font-size: 7pt;
            color: red !important;
         }
    }
 }

代码：

import React from 'react';
import { Button } from 'antd';
import 'antd/dist/antd.less';
import styles  from './MyContainer.less';

const MyContainer= () => {
        return (
          <Button type="primary" size="small" className={styles.antButton}  >Download</Button>
    );
 };
export default MyContainer;

我在react（版本16.13.1）中使用Ant design（版本4.3.0）和Webpack（版本4.42.0）。我还安装了less-loader（版本7.3.0）和babel-plugin-import（版本1.13） .3).

我不知道我是否缺少 Webpack 的任何特定配置，或者问题出在其他地方？

我想用ES6导入编写require.在没有密钥的情况下,很容易做到:

var args2 = require('yargs2'); - > import foo from 'bar';

但是使用密钥,我找不到合适的语法:

var foo = require('bar').key;

我怎样才能做到这一点？

我们正在使用 CSS Grid，我们意识到还有其他方法可以让以下代码工作，但我们想使用 CSS Grid。

我们有以下场景，我们的 CSS 编译为：

.r4 {
  grid-template-rows: var(--height-base) auto minmax(var(--height-base), -webkit-max-content) minmax(var(--height-base), -webkit-max-content);
  grid-template-rows: var(--height-base) auto minmax(var(--height-base), max-content) minmax(var(--height-base), max-content);
}

Autoprefixer在第一个属性中添加了-webkit前缀max-content。这是预期和期望的。但是，当您尝试在 Safari 中呈现此 CSS 时，Safari 使用第二个属性（无-webkit前缀）并且无法正常工作。

我相信 Safari 会看到具有相同名称的属性并使用后者。

问题：我应该如何使用max-content它才能在 Safari 和 Chrome 中工作？有没有办法让Safari“选择”包含-webkit前缀的正确属性，max-content或者我应该使用max-content/min-content以不同的方式？

请看这个codepen

.r4 {
  grid-template-rows: var(--height-base) auto minmax(var(--height-base), -webkit-max-content) minmax(var(--height-base), -webkit-max-content);
  grid-template-rows: var(--height-base) auto minmax(var(--height-base), max-content) minmax(var(--height-base), max-content);
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: …