使用“樣式組件”創建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樣式或className

因此，魅力將在這里工作，但我不想僅在這種情況下使用它。 我已經很喜歡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>
   }