如何将自定义 CSS 添加到样式组件？答案

【问题标题】：How to add custom css to a styled-component?如何将自定义 CSS 添加到样式组件？
【发布时间】：2020-07-12 02:52:57
【问题描述】：

如果我将 CSS 作为字符串获取，我试图了解如何在样式化组件中呈现 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')};
`

但在这种情况下，我不知道哪些属性会进入我的组件。我应该解析那个字符串吗？

【问题讨论】：

标签： javascript reactjs typescript styled-components

【解决方案1】：

我不确定这是您要找的。但是，如果我需要设置两种不同类型的 css，我会这样做。只需使用 css 道具包装它们。签出this

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

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

【讨论】：