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

Question

实际上，我继承了一个ReactJS web 应用程序，它由CRA 和Ant-Design 初始化。 .我只是使用 Material-UI，没有和设计的经验。

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 组件？

Answer 1

与每个 CSS-in-JS 一样，您可以针对普通的 CSS 属性:

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>
  );
}