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

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

import { jsx } from 'theme-ui';

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

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

import { jsx } from 'theme-ui';

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