Ant Design Card外部CSS样式导入失效，咨询正确设置方式

已正确导入外部CSS样式文件，想确认是否可以通过该方式为Ant Design Card设置样式，还是必须使用行内样式？目前第一个通过className绑定样式的Card未生效，第二个使用行内style的Card样式正常。

positions.styles.css #

.display{
    overflow: hidden;
    width: 90%;
    font-family: Arial;
    font-size: 23px;
    text-align: center;
}

主组件代码 #

import { Card, Space } from 'antd';
import { Typography } from 'antd';
import cat from '../../assets/cat.png';
import ape from '../../assets/apes-together.gif';
import styles from './positions.styles.css';
const { Title } = Typography;

function Positions(props) {
    return (
        <div className="content-container">
            <h3 className="content-header" style={{padding: "2%", fontSize: '40px'}}>Positions</h3>

            <div class="row" style={{display:'flex'}}>
                <Space>
                    <Card className={styles.display} title={<Title level={2}>Tech Excellence</Title>}>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis arcu dui, et maximus nunc feugiat eu. Proin in dui eget ligula dictum volutpat sed vitae neque. In rhoncus quam sapien, eget dapibus arcu malesuada vel. Sed iaculis sapien lorem, sed congue dui mollis non.</p>
                    </Card>

                    <Card title={<Title style={{padding: "2px", marginTop: 20}} level={2}>Collaboration</Title>} style={{overflow: 'hidden', width: '90%', fontSize: '23px', backgroundImage:`url(${ape})`}}>
                        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis arcu dui, et maximus nunc feugiat eu. Proin in dui eget ligula dictum volutpat sed vitae neque. In rhoncus quam sapien, eget dapibus arcu malesuada vel. Sed iaculis sapien lorem, sed congue dui mollis non. </p>
                    </Card>
                </Space>
            </div>
        </div>
    );
}

export default Positions;

并非必须使用行内样式，问题出在CSS导入方式和类名绑定的不匹配上，以下是两种修复方案：

方案1：使用普通CSS导入（不启用CSS Modules） #

如果不需要样式模块化隔离，直接修改导入方式：

// 替换原导入语句
import './positions.styles.css';

同时将Card的className改为普通字符串：

<Card className="display" title={<Title level={2}>Tech Excellence</Title>}>

方案2：启用CSS Modules（推荐，避免全局样式污染） #

若想保留模块化特性，需确保构建工具识别当前CSS为CSS Modules：

• 将CSS文件名改为positions.styles.module.css（这是Create React App、Vite等工具的默认约定）
• 保持原导入方式import styles from './positions.styles.module.css';，className={styles.display}的写法不变

额外注意：Ant Design默认样式优先级 #

即使类名绑定正确，部分样式（如font-size）可能因Ant Design Card的默认样式优先级更高不生效，可通过提高选择器优先级解决：

.display .ant-card-body {
    font-size: 23px;
    font-family: Arial;
    text-align: center;
}
.display {
    overflow: hidden;
    width: 90%;
}

内容的提问来源于stack exchange，提问作者Kanika Singla