Безопасно / эффективно использовать 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

Давая то, что вы просите, я думаю, вы можете легко сделать это с помощью реквизита

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>

Answer 2

Я могу придумать два способа сделать то, что вы хотите.

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)')

Дайте мне знать, если есть вещи, которые мне не хватает.