React — Passing props with styled-components

I believe what the documentation is saying is that you should avoid including your styles inside of the rendering component:

DO THIS

const StyledWrapper = styled.div`  /* ... */`const Wrapper = ({ message }) => {  return <StyledWrapper>{message}</StyledWrapper>}

INSTEAD OF THIS

const Wrapper = ({ message }) => {  // WARNING: THIS IS VERY VERY BAD AND SLOW, DO NOT DO THIS!!!  const StyledWrapper = styled.div`    /* ... */  `  return <StyledWrapper>{message}</StyledWrapper>}

Because what happens is when the component's Props changes, then the component will re-render and the style will regenerate. Therefore it makes sense to keep it separate.

So if you read further on to the Adapting based on props section, they explain this:

const Button = styled.button`  /* Adapt the colours based on primary prop */  background: ${props => props.primary ? "palevioletred" : "white"};  color: ${props => props.primary ? "white" : "palevioletred"};  font-size: 1em;  margin: 1em;  padding: 0.25em 1em;  border: 2px solid palevioletred;  border-radius: 3px;`;// class X extends React.Component {//  ...render(  <div>    <Button>Normal</Button>    <Button primary>Primary</Button>  </div>);// }

this works because when you use the Button component in class X, it will know the props of class X without you having to tell it anything.

For your scenario, I imagine the solution would be simply:

const TabWrapper = styled.li`  display: flex;  align-items: center;  justify-content: center;  padding: 100px;  margin: 1px;  font-size: 3em;  color: ${props => (props.isSelected ? `white` : `black`)};  background-color: ${props => (props.isSelected ? `black` : `#C4C4C4`)};  cursor: ${props => (props.isSelected ? 'default' : `pointer`)};`;const Tab = ({ onClick, isSelected, children }) => {  return <TabWrapper onClick={onClick}>{children}</TabWrapper>}const X = <Tab onClick={() => console.log('clicked')} isSelected>Some Children</Tab>

I haven't tested this at all, so please feel free to try it out and let me know if it works for you or whatever worked for you!

You can pass an argument with Typescript as follows:

<StyledPaper open={open} />    ...const StyledPaper = styled(Paper)<{ open: boolean }>`   top: ${p => (p.open ? 0 : 100)}%;`;

For a more simple example with functional components:

Suppose you have an arrow like polygon and you need 2 of them pointing in different directions. So you can pass the rotate value by props

               <Arrow rotates='none'/>                         <Arrow rotates='180deg'/>

Then in the Component Arrow you have to pass the props like normal component to the styled component but in the styled component you have to use it like props:

    import React from 'react';    import styled from "@emotion/styled";    const ArrowStyled = styled.div`      background-color: rgba(255,255,255,0.9);      width: 24px;      height: 30px;      clip-path: polygon(56% 40%,40% 50%,55% 63%,55% 93%,0% 50%,56% 9%);      transform: rotate(${props => props.rotates});     `const Arrow = ({rotates}) => {    return (       <ArrowStyled rotates={rotates}/>    );}export default Arrow;