如何使用动态类值，如disabled或active with theme-ui？

动态类值是指根据特定条件动态地添加或移除CSS类。在使用theme-ui时，可以通过使用特定的props来实现动态类值的功能。

对于disabled状态，可以使用theme-ui的sx prop来设置样式。首先，需要在主题配置文件中定义disabled样式，例如：

// theme.js
export default {
  styles: {
    disabled: {
      opacity: 0.5,
      cursor: 'not-allowed',
    },
  },
};

然后，在组件中使用sx prop来应用disabled样式，根据条件动态添加或移除disabled类。例如：

import { jsx } from 'theme-ui';

function MyComponent({ disabled }) {
  return (
    <button
      sx={{
        variant: disabled ? 'styles.disabled' : '',
      }}
    >
      My Button
    </button>
  );
}

这样，当disabled为true时，按钮将应用disabled样式。

类似地，可以使用active状态来动态添加或移除active类。首先，在主题配置文件中定义active样式，例如：

// theme.js
export default {
  styles: {
    active: {
      backgroundColor: 'blue',
      color: 'white',
    },
  },
};

然后，在组件中使用sx prop来应用active样式，根据条件动态添加或移除active类。例如：

import { jsx } from 'theme-ui';

function MyComponent({ active }) {
  return (
    <button
      sx={{
        variant: active ? 'styles.active' : '',
      }}
    >
      My Button
    </button>
  );
}

这样，当active为true时，按钮将应用active样式。

需要注意的是，以上示例中的主题配置文件和组件代码仅为示意，实际使用时需要根据具体情况进行调整。

关于theme-ui的更多信息和使用方法，可以参考腾讯云的相关产品和文档：