如何在Chakra UI中设置Tr元素的内容居中对齐？

在Chakra UI表格组件中，当某个<Td>内嵌入图片后，同一行的其他<Td>内容不再垂直居中。尝试在<Tr>上设置justifyContent={'center'}，但没有效果。

以下是相关代码（所有组件均来自Chakra UI）：

<TableContainer>
  <Table size="sm">
    <Thead>
      <Tr>
        <Th>To convert</Th>
        <Th>into</Th>
        <Th isNumeric>multiply by</Th>
      </Tr>
    </Thead>
    <Tbody>
      <Tr bg={'pink'} justifyContent={'center'}>
        <Td>
          <Stack align={'center'} direction={'row'}>
            <Image
              height="48px"
              width="48px"
              src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
              alt="Green double couch with wooden legs"
              borderRadius="lg"
            />
            <Text fontSize={'14px'} color={'gray.700'}>
              Test Test Test RTest
            </Text>
          </Stack>
        </Td>
        <Td>millimetres (mm)</Td>
        <Td isNumeric>25.4</Td>
      </Tr>
      <Tr>
        <Td>feet</Td>
        <Td>centimetres (cm)</Td>
        <Td isNumeric>30.48</Td>
      </Tr>
      <Tr>
        <Td>yards</Td>
        <Td>metres (m)</Td>
        <Td isNumeric>0.91444</Td>
      </Tr>
    </Tbody>
    <Tfoot>
      <Tr>
        <Th>To convert</Th>
        <Th>into</Th>
        <Th isNumeric>multiply by</Th>
      </Tr>
    </Tfoot>
  </Table>
</TableContainer>

这是一个Next.js项目，已添加包含表格相关元素的CSS重置代码：

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

在<ChakraProvider />中仅配置了断点和字体：

const fonts = {
    heading: `'Open Sans', sans-serif`,
    body: `'Raleway', sans-serif`,
};

// 2. Update the breakpoints as key-value pairs
const breakpoints = {
    base: '0px',
    sm: '320px',
    md: '768px',
    lg: '960px',
    xl: '1200px',
    '2xl': '1536px',
};

// 3. Extend the theme
const theme = extendTheme({ breakpoints, fonts });

return (
  <ChakraProvider theme={theme}>
    <MyAppComponent />
  </ChakraProvider>
);

Chakra UI的<Tr>组件默认不支持justifyContent属性——表格行的布局遵循HTML表格原生规则，而非Flexbox，所以该属性不会生效。要实现单元格内容垂直居中，可采用以下两种方式：

方式一：为单个<Td>设置垂直对齐 #

直接给需要居中的<Td>添加verticalAlign="middle"属性，这是表格单元格的原生CSS属性，Chakra UI支持直接传递：

<Tr bg={'pink'}>
  <Td>
    <Stack align={'center'} direction={'row'}>
      <Image
        height="48px"
        width="48px"
        src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
        alt="Green double couch with wooden legs"
        borderRadius="lg"
      />
      <Text fontSize={'14px'} color={'gray.700'}>
        Test Test Test RTest
      </Text>
    </Stack>
  </Td>
  <Td verticalAlign="middle">millimetres (mm)</Td>
  <Td isNumeric verticalAlign="middle">25.4</Td>
</Tr>

方式二：全局配置表格单元格默认垂直居中 #

如果希望所有表格的<Td>和<Th>都默认垂直居中，可扩展Chakra UI主题，修改组件的基础样式：

const theme = extendTheme({
  breakpoints,
  fonts,
  components: {
    Td: {
      baseStyle: {
        verticalAlign: 'middle',
      },
    },
    Th: {
      baseStyle: {
        verticalAlign: 'middle',
      },
    },
  },
});

内容的提问来源于stack exchange，提问作者Morton