如何在Chakra UI的Text组件响应式样式中使用三元表达式？

方法1：直接修正响应式样式写法 #

你之前的代码问题在于多嵌套了一层大括号，Chakra UI的响应式样式值支持直接写入动态表达式，修正后即可实现需求：

<Text 
  textStyle="someStyle"
  textAlign={{ 
    base: 'center', 
    md: foo ? 'left' : 'center' 
  }}
>
  {props.content}
</Text>

这里md断点的样式值通过foo props直接判断，返回对应的left或center，完全匹配你在Styled Components中的逻辑。

方法2：封装可复用自定义组件（适合多处使用） #

如果该响应式对齐逻辑需要在多个场景复用，可通过useStyleConfig封装成独立组件：

import { Text, useStyleConfig } from '@chakra-ui/react';

const AlignedText = ({ foo, content, ...props }) => {
  const baseStyles = useStyleConfig('Text');

  return (
    <Text
      textStyle="someStyle"
      textAlign={{
        base: 'center',
        md: foo ? 'left' : 'center'
      }}
      {...baseStyles}
      {...props}
    >
      {content}
    </Text>
  );
};

// 调用示例
<AlignedText foo={true} content="你的文本内容" />

方法3：使用sx属性实现灵活控制 #

Chakra的sx属性兼容响应式语法与动态表达式，写法更自由：

<Text 
  textStyle="someStyle"
  sx={{
    textAlign: {
      base: 'center',
      md: foo ? 'left' : 'center'
    }
  }}
>
  {props.content}
</Text>

方法4：扩展主题组件变体（全局复用） #

若想将该对齐逻辑纳入全局主题，方便所有Text组件调用，可扩展组件变体：

// 主题配置文件
import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    Text: {
      variants: {
        responsiveAlign: ({ foo }) => ({
          textAlign: {
            base: 'center',
            md: foo ? 'left' : 'center'
          }
        })
      }
    }
  }
});

// 使用时
<Text textStyle="someStyle" variant="responsiveAlign" foo={true}>
  {props.content}
</Text>

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ