I have this component and I can't use the theme with typescript
const buttonDisabled = css`
color: ${({ theme }) => theme.color};
`;
How can I type this component?
error: No overload matches this call.
Overload 1 of 2, '(template: TemplateStringsArray, ...args: CSSInterpolation[]): SerializedStyles', gave the following error.
Argument of type '({ theme }: { theme: any; }) => any' is not assignable to parameter of type 'CSSInterpolation'.
Type '({ theme }: { theme: any; }) => any' is missing the following properties from type 'CSSInterpolation[]': pop, push, concat, join, and 28 more.
Take help from their official documentation it have everything related to create a component in emotion https://emotion.sh/docs/styled and Simplest way to create a component using emotion css is
import styled from '@emotion/styled'
const Button = styled.button`
color: turquoise;
`
render(<Button>This my button component.</Button>)
pass props
import "./styles.css";
import styled from "@emotion/styled";
export const DIV = styled.div`
background-color: pink;
color: ${(props) => props.color};
`;
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<DIV color="blue">Hello World</DIV>
</div>
);
}
and if u want to only use css
import "./styles.css";
import {css} from '@emotion/css';
const color = 'blue';
export const buttonDisabled = css`
color:${color}
`;
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div className={buttonDisabled}>Hello World</div>
</div>
);
}