How to use css-in-js in ant-design components?

Question

Actually, A ReactJS web application inherited to me and it was initialized by CRA and Ant-Design. I just worked with Material-UI and had no experience with And Design.

The way Material-UI handles the styles is awesome but AntD uses less to handle CSS. it's very hard for me to work like ancients.

I searched a lot but didn't find a way to use JSS[CSS in JS] in a project with Ant Design.

I mean like below:

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

But in the Ant Design docs just declare like ancient stuffs:

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

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

How I can do it? or Is there any way to use JSS for AndD components?

Dennis Vash · Accepted Answer · 2019-09-24 10:55:49Z

1

As every CSS-in-JS, you can target the normal CSS-properties:

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

In some occasions you may need to target a specific antd CSS class.

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

In the next example, we styled the hover color of an Icon and the default styling of the Tooltip component (changed the default black background):

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

answered Sep 24, 2019 at 10:55

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use css-in-js in ant-design components?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related