Styled-component 对象无法观察 mobx 的变化

Question

我希望styled-components 生成的 HOC 在其属性之一发生更改时重新渲染。我正在使用 MobX 进行更改检测。

这不会响应更改，我想我明白为什么。问题是是否有一个简单的解决方法可以让它发挥作用。

const DemoComponent = observer(styled.div`
  background-color: ${props => props.myObject.myObservableIsTrue ? 'red' : 
'green'};
`);

Answer 1

这个小sn-p很难判断，但我的一个猜测是你没有注入任何商店，所以目前没有商店连接到你的组件。

这是一个简单的例子，说明我如何在 mobx 中使用 styled-components，如果有帮助的话：

已编辑： 我已经更新了代码示例。

你知道容器/展示模式吗？ 这是缺失的环节。

为了尽量减少渲染 您需要将有状态的组件彼此分开。 将它们分散到一个容器组件（又名 Dumb Components）

通过这种方式，您可以分离状态关注点并仅呈现具有更改状态的组件。

更新： https://codesandbox.io/s/zxx6o2pq3l

Answer 2

对不起！！！有点骇人听闻的工作，但尝试将您的整个代码带入 @inject("store") 类：

import React from "react";
import { observer, inject } from "mobx-react";
import styled, { css } from "styled-components";

@inject("store")
@observer
export default class OtherComponent extends React.Component {

  render() {
    const MyWrapper = (store) => {
      const Wrapper = styled.div`
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  color: ${({ color }) => color};
  border: 2px solid ${({ color }) => color || "black"};
  padding: 10px;
  margin-bottom: 10px;
`;
      return (
        <Wrapper {...store}>
          styled-component
        <button onClick={store.changeColor}>change color</button>
        </Wrapper>
      );
    }
    const { store } = this.props;
    return (
      <div>
      {
          MyWrapper(store)
      }
      </div>
    );
  }
}

Mobx 实际上是这样读的：@inject("store") @observer export default class...

所以它实际上是扩展组件的扩展；只有包装的变量才会适用！