Question

我正在使用令人敬畏的“Styled-Components”

但我现在正在使用另一个包装元素的包，因此我无法将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

了

由于

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

使用“Styled-Components”创建css规则

1 个答案: