使用“样式化组件”创建 css 规则答案

【问题标题】：creating css rule with "Styled-Components"使用“样式化组件”创建 css 规则
【发布时间】：2018-04-16 18:09:45
【问题描述】：

我正在使用很棒的“样式化组件”

但我现在正在使用另一个包，其中包含一个元素，因此我无法将我的 StyledComponents 推到那里，因为我不想更改他的包。

我看到魅力有一个很好的把戏。 StyledComponents 支持吗？

import { css } from 'glamor';

let rule = css({
  color: 'red',

})

<div {...rule}>
  zomg
</div>

如果你想想我为什么需要它，这里有一个例子：这是我正在使用的外部包：

External = props => (
    <div>
        <input style={props.inputStyle} className={props.inputClass} />
    </div>
);

所以你可以看到我需要传入一个 json 样式或 className

所以 Glamour 可以在这里工作，但我不想只在这种情况下使用它。我已经很喜欢 StyledComponent

谢谢

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

如果我理解您的查询，您可以像这样为组件定义 css 规则

import styled from 'styled-components'

   const Wrapper =  styled.div`
     color: 'red';
     font-weight: bold;
     background-color: ${ props => props.color === 'primary' ? 'green' : 'red' }
   `

   export const Component = () => {
     <Wrapper color='primary'>
       I have a red text, and bold font-weight.
     </Wrapper>
   }

【讨论】：

谢谢，但正如我提到的，我需要一个 css 规则。我无法更新该输入