ant-design / cssinjs

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

How to use ant theme object inside styled components from emotion #47

Closed VugarAhmadov closed 1 year ago

VugarAhmadov commented 1 year ago

How to use ant theme object inside styled components from emotion like Mui? Normally I do it in Mui like

import { Theme as MuiTheme } from "@mui/material/styles";

declare module "@emotion/react" {
  export interface Theme extends MuiTheme {}
}

and access theme variable inside styled components like

import styled from "@emotion/styled";

export const StyledDiv = styled.div`
    .MuiToggleButtonGroup-root {
        ${({ theme }) => theme.breakpoints.down("md")} {
          flex-wrap: wrap;
        }

        .MuiButtonBase-root {
            background-color: ${({ theme }) => theme.palette.common.white};
            color: ${({ theme }) => theme.palette.custom.greyChateau};
        }
    }
`

How I will get theme object in Ant-design cssinjs solution?

zombieJ commented 1 year ago

In antd you can get by:

import { theme } from 'antd';

const { useToken } = theme;