使用"Styled-Components"创建css规则

Question

我正在使用令人敬畏的“样式化组件”

但我现在使用的是另一个包，它将一个元素封装在其中，所以我不能将我的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风格或类Name

所以魅力在这里会起作用，但我不想只在这个场景中使用它。我已经很喜欢StyledComponent了

谢啦

Answer 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>
   }