title: Safe/Efficient to use string.replace() with styled components?
body: <p>Is it safe and efficient to create a function that takes something like:</p>
  
  <pre><code>style = {
     border: '1px solid primary'
  }
  </code></pre>
  
  <p>And converts it into to something like:</p>
  
  <pre><code>style = {
     border: '1px solid rgb(0, 0, 0)'
  }
  </code></pre>
  
  <p>Before giving it as a prop to a styled component like below?</p>
  
  <pre><code>const StyledContainer = styled.div`
    border: ${props =&gt; props.border};
  `;
  </code></pre>
  
  <p>I worry about it becoming slow over time, as I would need to iterate over each style object every time and use something like string.replace() on each item. I also worry about CSS injections and am not familiar with them. I say this because I have many text input fields throughout my project.</p>
  
  <hr>
  
  <p>To clarify, I do have it working:</p>
  
  <pre><code>const replaceStringWithTheme = (string, theme) =&gt; {
    const modifiedString = string
      .replace("primary", theme.primary)
      .replace("secondary", theme.secondary)
      .replace("background", theme.background)
      .replace("xs", "0.5rem")
      .replace("sm", "1rem")
      .replace("md", "1.5rem")
      .replace("lg", "2.0rem")
      .replace("xl", "2.5rem");
    return modifiedString;
  };
  
  const replacePropsWithTheme = (props, theme) =&gt; {
    const cloneObject = { ...props };
    for (let [key, prop] of Object.entries(cloneObject)) {
      if (typeof prop === "string") {
        cloneObject[key] = replaceStringWithTheme(prop, theme);
      }
    }
    return cloneObject;
  };
  
  export function Container(props) {
    const theme = useThemeState();
    const modProps = replacePropsWithTheme(props, theme);
    return &lt;StyledContainer {...modProps}&gt;{props.children}&lt;/StyledContainer&gt;;
  }
  
  const StyledContainer = styled.div`
    width: ${props =&gt; props.width};
    height: ${props =&gt; props.height};
    margin: ${props =&gt; props.margin};
    padding: ${props =&gt; props.padding};
    background: ${props =&gt; props.background};
    border: ${props =&gt; props.border};
  `;
  </code></pre>
  
  <p>I am more just wondering, is this a really bad idea? I am cloning the props that get passed. For some reason, it seems like some arbitrary code could be indirectly executed by altering the default props object.</p>