在React项目中，如何处理MobX状态改变时Less样式同步更新的问题？

在React项目中，当使用MobX管理的状态发生改变时，确保Less样式能够同步更新，通常需要结合使用CSS Modules或styled-components这类工具。以下是两种常见的解决方案：

**1. CSS Modules**
- 首先，在`.less`文件中声明样式，并使用`:local()`伪类来绑定MobX状态：

.link {
  color: var(--color);
  &.active {
    color: darken(var(--color), 10%);
  }
}

// 在组件里，使用`observer`装饰器监听状态变化
import { observer } from 'mobx-react';

function LinkComponent({ colorState }) {
  @observer
  class Component extends React.Component {
    render() {
      return <a className={`link ${colorState === 'active' ? 'active' : ''}`} />;
    }
  }
  
  return <Component colorState={store.myVariable} />;
}

- 当`store.myVariable`改变时，React会自动重新渲染组件，导致Less的样式也跟着更新。

**2. styled-components**
- 使用styled-components时，可以直接在样式中访问MobX的状态：

import styled, { useObserver } from 'styled-components';
import { observer } from 'mobx-react';

const Link = styled('a')`
  color: ${({ active }) => (active ? darken(store.myVariable, 10%) : store.myVariable)};
`;

function LinkWrapper() {
  const colorState = useObserver(() => store.myVariable);

  return <Link active={colorState === 'active'} />;
}

- 这样，每当`store.myVariable`变化，`LinkWrapper`组件及其子元素都会重新渲染，样式也随之更新。