I am curious to understand the potential reasons for styled-components not injecting all the necessary CSS into a page's header.
In an existing project, I have defined a simple button like this:
const Button = styled.button`
background-color: ${props => props.disabled ? "red" : "blue"}
`
And used it in the following way:
render() {
return (
<div>
<input value={this.state.value} onChange={this.changeValue} />
<Button disabled={this.state.value === "123"}>Button</Button>
</div>
);
}
Initially, the button displays correctly (e.g. as red), but it fails to switch to blue when the state changes.
Upon inspecting the generated HTML, I noticed that the 'blue' style (.hqrbog) is not being injected into the header.
<style type="text/css" data-styled-components="jiLefI" data-styled-components-is-local="true">
/* sc-component-id: sc-bdVaJa */
.sc-bdVaJa {}
.jiLefI{background-color:red;}
</style>
<div data-reactroot="">
<input value="12" class="drop-val">
<button class="sc-bdVaJa hqrbog">Button</button>
</div>
This code works perfectly fine in a new app created with create-react-component, but encounters issues in the existing project.
I suspect that there might be an issue related to webpack or babel configuration affecting how styled-components injects CSS into the header. However, I'm uncertain where to begin investigating.