Skip to main content

Multi Proxied Property on components

Styled components​

In styled components, the property should be proxied multiple times.

e.g.

In static terms

function AppBar() {
  return <AppBarBase>Hello</AppBarBase>;
}

const AppBarBase = styled.div`
  background-color: red;
  color: white;
  font-size: 1.5em;
`;

In dynamic terms

function AppBar({
  title,
  color = "white",
  textColor = "red",
}: {
  title: string;
  color?: string;
  textColor?: string;
}) {
  return (
    <AppBarBase
      color={color} // proxy 1
      textColor={textColor} // proxy 1
    >
      {title}
    </AppBarBase>
  );
}

const AppBarBase = styled.div<{ color: string; textColor: string }>`
  background-color: ${(p) => p.color}; /* proxy 2 */
  color: ${(p) => p.textColor}; /* proxy 2 */
  font-size: 1.5em;
`;