I cannot find another way to give my props dynamic styles without creating the styled-ponent inside the Text ponent. For performance I'd like to create the ponent outside of the Text ponent.

Styled Component

import React, { ReactChildren } from 'react'
import styled from 'styled-ponents'


export const Text = ({ as = 'p', children, styles = {} }) => {
  const newStyles = Object.entries(styles).reduce((acc, [key, value]) => {
    return `${acc}${key}: ${value};`
  }, '')
  const Component = styled.p`
    ${newStyles}
    color: #000;
  `
  return <Component as={as}>{children}</Component>
}

Desired Usage

<Text styles={{ height: "10px" }} />

Output HTML

<p styles="height: 10px" />

I cannot find another way to give my props dynamic styles without creating the styled-ponent inside the Text ponent. For performance I'd like to create the ponent outside of the Text ponent.

Styled Component

import React, { ReactChildren } from 'react'
import styled from 'styled-ponents'


export const Text = ({ as = 'p', children, styles = {} }) => {
  const newStyles = Object.entries(styles).reduce((acc, [key, value]) => {
    return `${acc}${key}: ${value};`
  }, '')
  const Component = styled.p`
    ${newStyles}
    color: #000;
  `
  return <Component as={as}>{children}</Component>
}

Desired Usage

<Text styles={{ height: "10px" }} />

Output HTML

<p styles="height: 10px" />

• javascript
• reactjs
• styled-ponents

• Couldn't you just do the Object.entries bit outside the styled-ponent and pass it in? – serraosays Commented Jun 15, 2021 at 17:04
• Ye, but the issue is having the Component inside the Text ponent. So if I were to take both out I wouldn't be able to return a ponent from a function. But maybe I can and I just cannot see it :p – Jamie Hutber Commented Jun 15, 2021 at 17:15

2 Answers 2

The above code is confusing in that you want to apply styles to the DOM style property, but you're also applying them as CSS styles to a classname. There's no need to create this posed ponent because styled-ponents already handles as, children, and style properties without posing:

Example 1:

import React from "react";
import styled, { Interpolation } from "styled-ponents";

export type TextProps = {
  as?: string | React.ComponentType<any>;
  children: React.ReactNode;
  styles?: Interpolation<React.CSSProperties>;
};

const Component = styled.p<TextProps>`
  ${({ styles }) => styles}
  color: #000;
`;

export const Text = ({
  as,
  children,
  styles
}: TextProps): React.ReactElement => (
  <Component styles={styles} as={as}>
    {children}
  </Component>
);

export default Text;

Example 2:

import styled from "styled-ponents";

const Text = styled.p`
  color: #000;
`;

export default Text;

Example 3:

import * as React from "react";
import styled from "styled-ponents";

export type TextComponentProps = {
  className?: string;
  children: React.ReactNode;
  styles?: React.CSSProperties;
};

const TextComponent = ({
  children,
  className,
  styles
}: TextComponentProps): React.ReactElement => (
  <p className={className} style={styles}>
    {children}
  </p>
);

const Text = styled(TextComponent)`
  color: #000;
`;

export default Text;

Usage:

import * as React from "react";
import Box from "./Box";
import Text from "./Text";
import Text2 from "./Text2";
import Text3 from "./Text3";
import "./styles.css";

const App = (): React.ReactElement => (
  <div className="app">
    <h1>Example 1 - "styles" as CSS Styles</h1>
    <Box>
      <Text styles={{ height: "10px" }}>Hello</Text>
      <Text as="h1">Goodbye</Text>
    </Box>
    <hr />
    <h1>Example 2 - "style" as DOM styles</h1>
    <Box>
      <Text2 style={{ height: "10px" }}>Hello</Text2>
      <Text2 as="h1">Goodbye</Text2>
    </Box>
    <hr />
    <h1>Example 3 - "styles" as DOM styles</h1>
    <Box>
      <Text3 styles={{ height: "10px" }}>Hello</Text3>
      <Text3 as="h1">Goodbye</Text3>
    </Box>
  </div>
);

export default App;

Output:

On that note, it sounds like you might be trying to do something I did with posabled-styled-ponents, although I wouldn't remend it because it doesn't work with SSR apps.

You could create a ref on the styled ponent in order to set the style in an effect like this:

const Component = styled.p`
  background-color: red;
`;

const Text = ({ as = 'p', children, styles = {} }) => {
  const newStyles = Object.entries(styles).reduce((acc, [key, value]) => {
    return `${acc}${key}: ${value};`
  }, '')
  
  const ref = React.createRef();

  React.useEffect(() => {
    ref.current.style = newStyles;
  }, []);
  
  return <Component ref={ref} as={as}>{children}</Component>
}

ReactDOM.render(<Text styles={{ height: "10px" }}>This paragraph is 10px high</Text>, document.getElementById('root'));

<script crossorigin src="https://unpkg./react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg./react-dom@17/umd/react-dom.production.min.js"></script></script>
<script src="https://unpkg./react-is@17/umd/react-is.production.min.js"></script>
<script src="https://unpkg./styled-ponents/dist/styled-ponents.min.js"></script>

<div id="root"></div>