Installation
To use styled components syntax, install @emotion/styled package:
!important You will need to wrap your application with MantineProvider to access theme in styles.
Usage
You can find @emotion/styled
documentation here. All features
are supported, and you get Mantine theme as an argument:
Styled component
Styles API
Use static selectors to access component Styles API:
TypeScript
Add theme type
Add emotion.d.ts
declaration file to your src
folder or to any place included in your tsconfig.json
:
Polymorphic components
Emotion cannot correctly extract prop types from polymorphic components.
To add styles to such components with @emotion/styled
, you will need to redefine polymorphic component type
with createPolymorphicComponent function: