Как добавить пользовательский css к стилевому компоненту?

Question

Я пытаюсь понять, как визуализировать CSS внутри стилизованного компонента, если я получаю его в виде строки? "background: red; color: green; display: flex" Обычно я использую функцию renderThemeProperty

export declare const renderThemeProperty: (themePropName: string, styleName: string, force?: boolean | undefined) => ({ theme }: any) => string | any[];

export default styled.div`
  ${renderThemeProperty('backgroundColor', 'background-color')};
`

Но в этом случае я не знаю, какие свойства войдут в мой компонент. Должен ли я разобрать эту строку?

Answer 1

Я не уверен, что это то, что вы ищете. Однако вот как я это делаю, если мне нужно установить два разных типа css. Просто заверните их, используя css опору. Проверьте это из

const themaA = css`
  //custom css
`
const themaB = css`
  //custom css
`

const YourStyledComponent = styled.div`
    ${props => (props.a ? themeA : themeB)};
`