Как использовать css-in-js в компонентах ant-design?

Question

На самом деле, веб-приложение ReactJS унаследовано мной, и оно было инициализировано CRA и Ant-Design .Я только что работал с Material-UI и у меня не было опыта работы с And Design .

Способ, которым Material-UI обрабатывает стили, великолепен, но AntD использует less для обработки CSS.мне очень трудно работать как древние.

Я много искал, но не нашел способа использовать JSS [ CSS в JS ] в проекте с Ant Design.

Я имею в виду, как показано ниже:

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