How do you deal with dynamically inputs? about styled-components HOT 5 CLOSED

I would expect this generates only the CSS with left: 0;. Is this correct?

Yes, and you can also dynamically change it and it will actually change accordingly! 😱

No idea how this works, but it does, after one second left will be set to 50:

const MyComponent extends React.Component {

  state = { left: 0 };

  render() {
    const FlyingBall = styled.div`
      position: absolute;
      width: 1rem;
      height: 1rem;
      left: ${this.state.left}
    `;

    setTimeout(() => {
      this.setState({
        left: 50
      });
    }, 1000);

    return <FlyingBall />;
}

from styled-components.

ok, this is cool. Now I'm curious if you used a development or production mode … or to rephrase: If I want to provide cacheable CSS file for production how does it work? Do you identify dynamic styles and set them via the style attribute or inject a style tag?

from styled-components.

inject a style tag?

This, I'm 99% sure. We use aphrodite under the hood, so there's no external CSS file at the moment. Not sure if we want to go down that route…

from styled-components.

Since #29 (and 0.2.0), we have simplified this. If you write:

let something;

const X = styled.div`
  ${ something }
`

Then the value of something will be locked to its initial value. There's no way around it, unless you call styled.div inside a render method like @mxstbr does above (you're effectively making a new component each time with whatever the current value of something is)

If you want something dynamic, though, just interpolate a function!

let something;

const X = styled.div`
  ${ () => something }
`

Now every time X is re-rendered that function will be reevaluated and the current value of something will be injected. Easy!

from styled-components.

Thanks @geelen for the clarification!

from styled-components.