React Styled Component, defined Inside Component and Outside Return?-CodePudding

We have a Styled Component. My styled component is defined within a Function component, but outside its return method. See code below.

Someone mentioned a styled component should be defined outside a component in general. Is this true? Where is the best location to put 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;

CodePudding user response：

This creates a new component reference on ever render, which causes the full subtree to remount. Define it so that it is statically available, outside of the render, or in this case outside ProcedureServicesRowHeader.