javascript - 如何将自定义 CSS 添加到样式组件？

Question

如果我将 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')};
`

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

标签： javascriptreactjstypescriptstyled-components

Answer 1

我不确定这就是你要找的。但是，如果我需要设置两种不同类型的 css，我会这样做。只是用css道具把它们包起来。看看这个_

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

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