React Styled Component，定义了 Inside Component 和 Outside Return？答案

【问题标题】：React Styled Component, defined Inside Component and Outside Return?React Styled Component，定义了 Inside Component 和 Outside Return？
【发布时间】：2022-11-29 10:09:28
【问题描述】：

我们有一个样式化的组件。我的样式化组件是在 Function 组件内定义的，但在其 return 方法之外。请参阅下面的代码。

有人提到样式组件通常应该在组件外部定义。这是真的？放置 StyledTableCell 的最佳位置在哪里？

const ProcedureServicesRowHeader = () => {

  const StyledTableCell = styled(TableCell)`
    && {
      padding: 1.5px;
      color: green;
      background-color: blue;
    }
  `;

  return (
    <TableRow>
      <StyledTableCell textAlign="left">Service</StyledTableCell>
      <StyledTableCell textAlign="center">Units</StyledTableCell>
      <StyledTableCell textAlign="right">Charge</StyledTableCell>
      <StyledTableCell textAlign="right">Total</StyledTableCell>
    </TableRow>
  );
};

export default ProcedureServicesRowHeader;

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

这会在 ever render 上创建一个新的组件引用，这会导致重新安装完整的子树。定义它，使其在渲染之外静态可用，或者在这种情况下在ProcedureServicesRowHeader 之外。

【讨论】：