React-starter-kit: Shared site CSS

[mxmtsk]

Hey,

I have a question regarding the css structure as I'm still learning. I completely understand that each component should be independent but when I think of a bigger project this seems like pain to me.

For example: There are a lot of commonly used css classes (for example a container that holds the maximum width). Right now there seems to be no place where to put this code so that I don't have to copy it again and again for each component that needs it. Should I really create like a new comonent with the name "Container" so that I can use XXX in other Components or am I missing something? I couldn't find a scss file that has shared styles. Even App.scss prefixes all the elements with App_.

I hope someone can enlighten me :)

Thanks

[sebastianwestberg]

I usually go with the stand-alone _Container.scss-file like you mentioned.

It goes something like this:

.Container {
  @include clearfix;

  &--full {
    width: 100%;
  }

  &--content {
    width: em(1170);
  }

  &--valigned {
    /* and so on */
  }
}

And use it like this:
<section class="Container Container--content Contained--valigned"></section>

Specific container widths I put into the specific component that actually needs it. For basic things like setting the global font, base font size, normalizations of elements etc, I have a _base.scss file.

Hope that helps.

[mxmtsk]

Hey @sebastianwestberg,
thanks. Sure, that's how I would do it do. I just don't see a place in the starter kit where I can put those files without them getting prefixed (and :global(.classname) seems like an ugly way to achieve it). Where did you put your global sass files? :)

Thanks

[frenzzy]

How about this?

/* src/components/global.css (or scss) */
.container { }
.other { }

/* src/components/Layout/Layout.js (or App.js) */
import React from 'react';
import s from '../global.css';
import withStyles from 'isomorphic-style-loader/lib/withStyles';

function Layout({ children }) {
  return <div className={s.container}>{children}</div>
}

export default withStyles(s)(Layout);

/* src/components/MyComponent/MyComponent.css (or scss) */
.root { }
.some { }

/* src/components/MyComponent/MyComponent.js */
import React from 'react';
import sGlobal from '../global.css';
import s from './MyComponent.css';
import withStyles from 'isomorphic-style-loader/lib/withStyles';

function MyComponent() {
  return (
    <div className={s.root}>
      <div className={s.some}>Element with local ".test" class</div>
      <div className={sGlobal.container}>Element with global ".container" class</div>
      <div className={sGlobal.other}>Element with global ".other" class</div>
    </div>
  )
}

export default withStyles(s)(MyComponent);

[elaijuh]

How to deal with a rc component lib while it provides a css or less to be imported in your app?

[nathanhinish]

I was trying to use react-select and this worked for me. The double exclamation overrides the default webpack loaders, and I just turned off "the local scope by default" (modules) option.

import React, { Component } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './TaskInfoPanel.css';
import selectCss from '!!isomorphic-style!css?modules=false!react-select/dist/react-select.css';
...
class Cmp extends Component {
  ...
}
...
export default withStyles(s, selectCss)(Cmp);

[rafaelcorreiapoli]

@nathanhinish Finally I could import react-select's css to my project with your solution...
But should I inject this style on every single component that I will use React-Select? Another way would be creating a wrapper component but this doesn't seems good to me.. I would like to load this style globally.. any thoughts on this?

[nathanhinish]

@rafaelcorreiapoli This method injects the react-select CSS as a non-obfuscated global style so you'd only need to include it once.

[devdc]

@nathanhinish You just saved me from burning few hours for this. Thank you so much!