ant-design / cssinjs

https://ant-design.github.io/cssinjs
MIT License
237 stars 59 forks source link

How to use antd/cssinjs to define custom classname #34

Closed zorgick closed 1 year ago

zorgick commented 1 year ago

What problem does this feature solve?

In experimental version I noticed that there is a long-awaited support for JSS. Unfortunately, it is unclear how to use antd JSS implementation to define custom classNames like in react-jss. I see in the code, that useStyle hook is used const [wrapSSR, hashId] = useStyle(prefixCls);, but it returns a wrapper for the component, when I need an object with css class names. Is there a way to do so with your lib?

What does the proposed API look like?

see above

zombieJ commented 1 year ago

@ant-design/cssinjs is a package that focus on the component level cssinjs support. You should still use app level cssinjs solution (like jss, emotionjs, styled-component, etc) which you like to handle this.

import { theme } from 'antd';

const Text = styled.span`
  color: ${props => props.colorPrimary};
`;

const Demo = () => {
  cont { colorPrimary } = theme.useToken();

  return <Text colorPrimary={colorPrimary}>Hello World</Text>;
};