@ant-design/cssinjs

What is @ant-design/cssinjs?

@ant-design/cssinjs is a library that allows you to write CSS-in-JS for Ant Design components. It provides a way to style your components using JavaScript, which can help in maintaining styles in a modular and reusable manner.

What are @ant-design/cssinjs's main functionalities?

Define Styles

This feature allows you to define styles using JavaScript objects. The `createUseStyle` function takes a callback that returns an object with your styles. The `token` parameter can be used to access theme variables.

const useStyle = createUseStyle(({ token }) => ({
  button: {
    backgroundColor: token.colorPrimary,
    color: token.colorText,
    padding: '10px 20px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer'
  }
}));

Apply Styles

This feature allows you to apply the defined styles to your components. The `useStyle` hook returns an object with the generated class names, which you can then apply to your JSX elements.

const MyButton = () => {
  const { styles } = useStyle();
  return <button className={styles.button}>Click Me</button>;
};

Theming

This feature allows you to use theming in your application. You can define a theme object and use the `ThemeProvider` component to pass the theme to your styled components.

const theme = {
  colorPrimary: '#1890ff',
  colorText: '#ffffff'
};

const App = () => (
  <ThemeProvider theme={theme}>
    <MyButton />
  </ThemeProvider>
);

Other packages similar to @ant-design/cssinjs

styled-components

styled-components is a popular library for writing CSS-in-JS. It allows you to create styled components with tagged template literals. Compared to @ant-design/cssinjs, styled-components is more general-purpose and not specifically tied to Ant Design.

emotion

Emotion is another library for writing CSS-in-JS. It offers both a styled API similar to styled-components and a css function for creating class names. Emotion is known for its performance and flexibility, making it a strong alternative to @ant-design/cssinjs.

jss

JSS is a library for writing CSS-in-JS with a focus on high performance and modularity. It provides a powerful API for defining styles and theming. JSS is more low-level compared to @ant-design/cssinjs, offering more control but requiring more setup.

README

@ant-design/cssinjs

Component level cssinjs solution used in ant.design.

Live Demo

https://cssinjs.vercel.app/

Install

Development

npm install
npm start

License

@ant-design/cssinjs is released under the MIT license.