The styled-components documentation describes ways to generate styles as a function from the arguments passed to the component by consumers. For example:
const Input = styled.input`
color: ${props => props.inputColor || "palevioletred"};
`how does this part of the styled-components API work in ember with this package?
that is, is there a way to write code that looks like this:
// ./app/components/styled-heading/component.js
import styled from 'ember-styled-components';
const StyledHeading = styled.h1`
font-size: 2em;
background: ${args => args.highContrast ? 'white' : 'gray'}
`{-- ./app/templates/application.hbs --}
<StyledHeading @highContrast={{false}}>My background is gray</StyledHeading>
The
styled-componentsdocumentation describes ways to generate styles as a function from the arguments passed to the component by consumers. For example:how does this part of the styled-components API work in ember with this package?
that is, is there a way to write code that looks like this:
{-- ./app/templates/application.hbs --} <StyledHeading @highContrast={{false}}>My background is gray</StyledHeading>