polished: Mixin not working in styled-components conditional style

In this case, ellipsis will not be working…

import { ellipsis } from 'polished';

export const Subheader = styled.h2`
    ${props => props.foo && `
        ${ellipsis('312px')}
        color: ${color.blue};
    `}
`;

<Subheader foo>
    This one is a really long subheader I suppose!
</Subheader>

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (6 by maintainers)

Most upvoted comments

@chhuang You are getting that error because you are passing it a function as opposed to just the color prop. It should look like this:

background-color: ${props => props.color && lighten(.5, props.color)}

Working example: https://www.webpackbin.com/bins/-Kp-GnOppL8vu1Vya_n7

+16

bhough on Jul 14, 2017

Hi @vizFlux, your issue is that you are returning an interpolation within an interpolation which requires the css helper in styled-components: https://github.com/styled-components/styled-components/blob/master/docs/api.md#css

Once you do that, it should work just fine: https://www.webpackbin.com/bins/-KkkT31cIhxnIUZBRrFj

bhough on May 22, 2017

@bhough : sorted it out. This worked.

color: ${props => darken(0.4, getButtonTextColor(props))};

Thanks a lot for your valuable time. Cheers!

buddikastay on Nov 13, 2018