javascript - Styled-component 没有注入(inject)所有不同的 css 来处理不同的 Prop

Question

我想知道什么可能导致样式化组件没有将所有必要的 css 注入(inject)页面的标题。

我在现有元素中声明了一个 super 简单的按钮，如下所示:

const Button = styled.button`
    background-color: ${props => props.disabled ? "red" : "blue"}
`

然后像这样使用它:

render() {
    return (
        <div>
            <input value={this.state.value} onChange={this.changeValue} />
            <Button disabled={this.state.value === "123"}>Button</Button>
        </div>
    );
}

问题是按钮将在加载时按预期显示(例如红色)，但在状态更改时它没有蓝色样式。

查看生成的html，这是由于'blue'样式(.hqrbog)没有注入(inject)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>

当我将这些代码放入使用 create-react-component 创建的新应用程序时，一切正常。但他们只是不在这个现有元素中工作。

我想知道什么会导致 styled-component 不能正确地将 css 注入(inject)到标题中？我怀疑它与 webpack 或 babel 的设置方式有关，但我不知道从哪里开始。

Answer 1

尝试将您的属性从 disabled 重命名为其他名称。