--- order: 4 title: zh-CN: 隐藏情况下计算字符对齐 en-US: Calculate text style when hiding debug: true --- ## zh-CN 切换 Avatar 显示的时候,文本样式应该居中并正确调整字体大小。 ## en-US Text inside Avatar should be set a proper font size when toggle it's visibility. ```tsx import React, { useState } from 'react'; import { Avatar, Button } from 'antd'; type SizeType = 'large' | 'small' | 'default' | number; const App: React.FC = () => { const [hide, setHide] = useState(true); const [size, setSize] = useState('large'); const [scale, setScale] = useState(1); const toggle = () => { setHide(!hide); }; const toggleSize = () => { const sizes = ['small', 'default', 'large'] as SizeType[]; let current = sizes.indexOf(size) + 1; if (current > 2) { current = 0; } setSize(sizes[current]); }; const changeScale = () => { setScale(scale === 1 ? 2 : 1); }; return ( <>

Avatar Invalid
Avatar Invalid
); }; export default () => ; ```