如何在 ant-design 组件中使用 css-in-js？

Posted 2023-03-07

【中文标题】如何在 ant-design 组件中使用 css-in-js？

【英文标题】：How to use css-in-js in ant-design components?

【发布时间】：2020-01-23 20:30:22

【问题描述】：

实际上，我继承了一个 ReactJS Web 应用程序，它由 CRA 和 Ant-Design 初始化。我刚刚使用 Material-UI，没有使用 And Design 的经验。

Material-UI 处理样式的方式很棒，但 AntD 使用 less 处理 CSS。我很难像古人一样工作。

我搜索了很多，但没有找到在 Ant Design 项目中使用 JSS[CSS in JS] 的方法。

我的意思如下：

import  AntDCompo  from 'antd';
import  Styled , injectStyled  from 'react-jss';

const MyCompo = ( classes ) => (
  <AntDCompo className=classes.container />
);

const styles = Styled(
  container: 
    color: '#f00',
  ,
);

export default injectStyled(styles)(MyCompo);

但是在 Ant Design 文档中只是像古老的东西一样声明：

import  AntDCompo  from 'antd';
import styles from 'myCompoStyles.less';

const MyCompo = () => (
  <AntDCompo className=styles.container />
);

我该怎么做？或者有什么方法可以将 JSS 用于 AndD 组件？

【参考方案1】：

就像每个 CSS-in-JS 一样，您可以针对普通的 CSS-properties：

import  Icon  from 'antd';
const DarkHoverStyle = styled(Icon)`
  color: gray;
  :hover 
    color: palevioletred;
  
`;

在某些情况下，您可能需要定位特定的antd CSS 类。

const GlobalStyle = createGlobalStyle`
  .ant-tooltip-inner 
    background-color: palevioletred;
    color: black;
  
`;

在下一个示例中，我们设置了Icon 的悬停颜色和Tooltip 组件的默认样式（更改了默认的黑色背景）：

export default function App() 
  return (
    <FlexBox>
      <GlobalStyle />
      <Tooltip title="Github Icon">
        <DarkHoverStyle type="github" style= fontSize: 100  />
      </Tooltip>
    </FlexBox>
  );