将 string.replace() 与样式化组件一起使用是否安全/有效？

Question

创建一个类似于以下内容的函数是否安全有效：

style = {
   border: '1px solid primary'
}

并将其转换为：

style = {
   border: '1px solid rgb(0, 0, 0)'
}

在将其作为道具提供给如下样式组件之前？

const StyledContainer = styled.div`
  border: ${props => props.border};
`;

我担心它会随着时间的推移而变慢，因为我需要每次迭代每个样式对象并在每个项目上使用类似 string.replace() 的东西。我也担心 CSS 注入并且不熟悉它们。我这样说是因为我的项目中有很多文本输入字段。

---

为了澄清，我确实有它的工作：

const replaceStringWithTheme = (string, theme) => {
  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) => {
  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 <StyledContainer {...modProps}>{props.children}</StyledContainer>;
}

const StyledContainer = styled.div`
  width: ${props => props.width};
  height: ${props => props.height};
  margin: ${props => props.margin};
  padding: ${props => props.padding};
  background: ${props => props.background};
  border: ${props => props.border};
`;

我只是想知道，这真的是个坏主意吗？我正在克隆通过的道具。由于某种原因，似乎可以通过更改默认的 props 对象来间接执行一些任意代码。

Answer 1

我可以想出两种方法来做你想做的事。

1.) 使用基本样式。

const baseStyle = {
    position: 'absolute',
    color: 'red',
    // other properties
}

然后使用它，但只更改要更改的内容。

const inheritedStye = {
    ...baseStyle,
    color: 'green'
}

2.) 使用样式创建器功能

const createStyle = (color = 'primary', width = '1px', type = 'solid') => {
  return {
     border: `${widht} ${type} ${color}`
  }
}

// use it like
const myStyle = createStyle('rgb(0,0,0)')

如果有什么我遗漏的，请告诉我。

Answer 2

给出你所要求的，我认为你可以很容易地用道具做到这一点

const Box = styled.div`
  color: ${props => props.primary ? "red" : "blue"};
`;

或者你实际上可以在其中完成整个功能

const Box = styled.div`
  color: ${props => {
    switch (props.colorStyle) {
      case "primary": return "red";
      case "secondary": return "blue";
      default: return "black";
    }
  }};
`;

然后你就可以通过这个来使用它了

<Box colorStyle="primary">I'm with primary color</Box>