score:98

Accepted answer
  • The styled component will have to specify the prop to pass to the component like styled("h2")<IProps>. You can read more about the pattern from documentation
  • css 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;
  `}
`;

A use-case for css

score:-1

   /** In App.tsx **/

      <div className="App">
          <Button>Register</Button>
          <Button primary="primary">Register</Button>
     </div>


    /*In your functional component*/
    import styled from "styled-components";
    
    interface IButtonPropsType {
      primary: string;
    }
    
    export const Button = styled.button<IButtonPropsType>`
    background: ${(props) => (props.primary ? "palevioletred" : "white")}
    color: ${(props) => (props.primary ? "white" : "palevioletred")}
    font-size: 1.5em
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    `;

score:1

When using styled components in a diferent sheet, I was having the same error.

I had to do this in index.tsx:

 export interface RadioBoxProps {
    isActive: boolean;
}

Then, in the styling sheet:

 import { RadioBoxProps } from "./index";

export const RadioBox = styled.button<RadioBoxProps>`

background: ${(props) => props.isActive ? '#eee' : 'transparent'};

`

In the tutorial I was watching, the person passes without exporting the interface and importing in the styling sheet. For him, it was working just fine. However, for me I wasn't and just worked when I did what I shown above.

score:2

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};
`;

score:10

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


Related Query

More Query from same tag