CODEWITHSUNDEEP
reactjstypescript
SEJ1991
SEJ1991

Reputation: 21

@emotion/react ThemeProvider doesn't work

OS info. Macbook pro (M1 Pro) Monterey 12.1

libs version info. react: 17.0.2, @emotion/react: 11.7.1, @emotion/styled: 11.6.0

Hello guys. i have problem.

when I used styled-components. It's worked but not emotion/styled. why does not working ThemeProvider of @emotion/react ?

here are my codes...

App.tsx
...
import theme from '.styles/theme';
import { ThemeProvider } from '@emotion/react';
...
<ThemeProvider theme={theme}>
   <Component />
</ThemeProvider>



./styles/theme.ts
...
import { Theme } from '@emotion/react';
const theme: Theme = {
  ...
  color: 'red' //simple test code
};
export default theme;


./components/component.tsx
...
import styled from '@emotion/styled';
const Button = styled.button`
  color: ${(props) => props.color}
`;
const Component: React.FC = () => {
  return <Button />
};
export default Component;

Upvotes: 1

Views: 2110

Answers (1)

SEJ1991
SEJ1991

Reputation: 21

I solved it !! just needed delcare module types.

ex)

./types/Theme.ts
import '@emotion/react'; // it's important to use ThemeProvider
declare module '@emotion/react' {
  export interface Theme {
    color: string;
  }
}

Upvotes: 1

Related Questions