如何在 styles 的反应中添加道具？

Question

I have a simple section in which I want to change the width dynamically

Here is section

<div className="form-control">
            <Formats>
                {styles.map(style => <ButtonStyled type="button" active={style.id === styleId} onClick={() => setStyleId(style.id)} key={`button-${style.name}`}>{style.name}</ButtonStyled>)}
                {activeStyle && <FormatsContent>
                    <FormatsDescription>{activeStyle.desciption}</FormatsDescription>
                    <Proportions>
                        {activeStyle.proportions.map(x => <Proportion onClick={() => setProportion(x.proportion)} active={proportion === x.proportion} width={x.width} height={x.height} key={`proportion-${x.proportion}`}>{x.proportionLabel}</Proportion>)}
                    </Proportions> 
                </FormatsContent>}
            </Formats>
        </div>

Here is style

const Formats = styled.div`
    margin-left: 0px;
    padding:12px;
    background-color: ${gray.brightest};
    border-radius: 20px;
    width: 100%;
    & select {
    height: 31px;
    padding: 0;
    margin-left: 12px;
    }
`;

Now I want to add props to check if width is full or not isFullWidth:true/false

and on styles to use it like this,

   const Formats = styled.div`
    margin-left: 0px;
    padding:12px;
    background-color: ${gray.brightest};
    border-radius: 20px;
    width: ${props => props.isFullWidth ? '100%' : '59%'}
    & select {
    height: 31px;
    padding: 0;
    margin-left: 12px;
    }
`;

What do I need to change to achieve what I want?

Answer 1

The Format component should have isFullWidth prop holding either true or false as value as shown below:

The example below will give a 100% width

<Format isFullWidth ={true}>

</Format>

And this one will give a 59% width

<Format isFullWidth ={false}>

</Format>

Answer 2

I think it is enough to pass the prop to the component and keep the last style you posted:

So it should be

<Formats isFullWidth>
...
</Formats>

EDIT: wrong prop name

Answer 3

Styles interpolation are only available in styled-components for theming , if you're not using theme you can pass a prop called theme to your component, which can be passed down, this way your Component doesn't have to be inside a Provider

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`

// Define what main theme will look like
const theme = {
  main: "mediumseagreen"
};

render(
  <div>
    <Button theme={{ main: "royalblue" }}>Ad hoc theme</Button>
    <ThemeProvider theme={theme}>
      <div>
        <Button>Themed</Button>
        <Button theme={{ main: "darkorange" }}>Overidden</Button>
      </div>
    </ThemeProvider>
  </div>
);

Example from the docs