Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

styled-components / General

styled-components watercooler

The styled-components watercooler

Welcome to the styled-components watercooler, a space for general chat with everyone in the community. Jump in to the conversation below or introduce yourself!

Load previous messages

January 18, 2019 at 5:18am

What does your library entail? If you're injecting css I would imagine you're rending a component somewhere, you could just inject your createGlobalStyle component there.

  • reply
  • like

If not, you could just export the createGlobalStylecomponent and instruct the user in your readme to render it somewhere in their root view hierarchy.

  • reply
  • like

If not, you could just export the createGlobalStylecomponent and instruct the user in your readme to render it somewhere in their root view hierarchy.

thanks for reply, yeah that first thing came to my mind, but I want to make easy for users of my lib. In this way I have to export GlobalStyle, then default theme and so on, feels not component way...

  • reply
  • like

January 18, 2019 at 7:33am

That's fair, but I don't think there's a better way. Most other component packages just include a CSS file that you have to import anyways, I think users will understand.

  • reply
  • like

January 19, 2019 at 12:10pm

I have a confusing situation. If I don't include this:

import styled from 'styled-components/macro';

then there are no styles on my styled components when I just use

import {css} from 'styled-components';

And since I'm not actually using styled in my component file, I get an ESLint error about an unused import.

Edited
  • reply
  • like
import {css} from 'styled-components';
import React from 'react';

const View = ({children, className}) => (
    <div className={className}>
        {children}
    </div>
);

const viewStyle = css\`
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
\`;

const App = () => (
    <View css={viewStyle}>
        <p>This is some text</p>
    </View>
);

export default App;
Edited
  • reply
  • like

^ This does not apply the styles

  • reply
  • like

But if I import styled-components/macro, the styling works.

  • reply
  • like

This is true even if I import that into another component higher up the chain and even if I use it. If it's not imported into the component that is using css, it doesn't work.

Edited
  • reply
  • like

I can do this:

import 'styled-components/macro';
  • reply
  • like

and that works.

  • reply
  • like

January 19, 2019 at 8:52pm

To use the <View css={} /> syntax you need to use the Babel plugin, see https://www.styled-components.com/docs/tooling#babel-plugin for more info.

  • reply
  • like

The easier solution would be to just use the standard styled.elementName syntax, like so:

const View = styled.div`
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
`;

const App = () => (
    <View>
        <p>This is some text</p>
    </View>
);
Edited
  • reply
  • like

January 24, 2019 at 4:10am

for conditional check code ${props => props.isValid !== true && 'border: 1px solid red;'} would this be a better approach?

  • reply
  • like

or

${props => props.isValid !== true ? `
    border: 1px solid red;
  ` : ''}
  • reply
  • like

Your first solution should work fine.

  • reply
  • like

but is it the right approach?

  • reply
  • like

I don't believe styled-component instances will ever get Boolean props though since they're written to the DOM, so you don't need the strict equality check, you can just do

${props => !props.isValid && \`border: 1px solid red;\`}
Edited
  • reply
  • like

The only other option would be

border: ${props => !props.isValid ? '1px solid red' : 'none'};

or just

border: ${props => props.isValid : 'none' : '1px solid red'};
Edited
  • reply
  • like

They're both equally valid, it's personal preference.

  • reply
  • like

I see

  • reply
  • like

thanks

like-fill
1
  • reply
  • like

January 28, 2019 at 9:46am

Yes, falsy prop values are filtered out. true is not however (I think), so make sure to always put something useful. ${p => p.isValid || 'foo'} vs ${p => !p.isValid && 'foo'}

like-fill
1
  • reply
  • like

January 28, 2019 at 3:25pm

I just do something like this: opacity: ${props => props.opacity}; in the styled-component and then opacity={isActive ? '1' : '0'} on the component as a prop

  • reply
  • like

February 15, 2019 at 3:56am

Is there a way to have a styled component generate classes for dynamic prop rules, rather than a new class for each combination of dynamic rules? I could have 7 classes(5 background image urls, 2 opacity states) and either 100 classes or inline style for background-position (icon spritesheet). All in one styled-component style it'd generate 200 classes(once all icons have toggled their opacity state).

I'm sure this can be a common issue to run into and get much worse? In addition to all static CSS rules/props being duplicated for each of those classes. Seems a bit silly if the solution is to inline dynamic props via attr(or directly on the component)? Especially when it's a dynamic prop that isn't going to be updating frequently(in this case the only rule that changes on the element is it's opacity toggle, but the background-position is what would create the most classes, combinations with opacity aside).

  • reply
  • like

Log in or sign up to chat