Here is my styled component.
import * as React from 'react';
import styled from 'styled-components';
import { ComponentChildren } from 'app-types';
interface Props {
children: ComponentChildren;
emphasized: boolean;
}
const HeadingStyled = styled.h2`
${props => props.emphasized && css`
display: inline;
padding-top: 10px;
padding-right: 30px;
`}
`;
const Heading = (props: Props) => (
<HeadingStyled>
{props.children}
</HeadingStyled>
);
export default Heading;
I get warnings that:
Property 'emphasized' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, any>'.Cannot find name 'css'. Did you mean 'CSS'?How can I get this to work?
styled("h2")<IProps>. You can read more about the pattern from documentationcss is not required here, it is added as a helper when you need to actually return CSS from a function. Check out conditional rendering.Taking these into account, the component becomes:
const HeadingStyled = styled("h2")<{emphasized: boolean}>`
${props => props.emphasized && `
display: inline;
padding-top: 10px;
padding-right: 30px;
`}
`;
The previous answer worked for me, but just to add some information that was also helpful in my case:
StyledComponents uses a "ThemedStyledFunction" interface that allows the user to define additional Prop Types.
That means you could create an interface like:
interface IHeadingStyled {
emphasized: boolean;
}
And use it on the component:
const HeadingStyled = styled("h2")<IHeadingStyled>`
${props => props.emphasized && `
display: inline;
padding-top: 10px;
padding-right: 30px;
`}
`;
(Which is a cleaner way to implement what @BoyWithSilverWings suggested, in case you have multiple props)
Check this discussion for more complete information:
https://github.com/styled-components/styled-components/issues/1428#issuecomment-358621605
This solution also works with emotion, maybe cause both of them uses stylis as a preprocessor?
interface ButtonProps {
width: string;
}
const Button = styled("button")<ButtonProps>((props) => {
return `width: ${props.width};`;
});
or different flavour same thing
interface ButtonProps {
width: string;
}
const Button = styled("button")<ButtonProps>`
width: ${props => props.width};
`;