creating css rule with “Styled-Components”

Question

I am using the awesome "Styled-Components"

but I am now using another package that wraps an element inside it so I can't push my StyledComponents there as I don't want to change his package.

I saw glamor has a nice trick. Is that supported with StyledComponents?

import { css } from 'glamor';

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

})

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

If you think about why I need it, here is an example: this is an external package I'm using:

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

so you can see I need to pass in a json style or className

so Glamor will work here, but I dont want to use it just for this scenario. I'm already enjoying StyledComponent

Thanks

Answer 1

If I understood your query, you can define css rules to a component, like this

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