How to include CSS with package? about generator-react-component HOT 6 OPEN

Here's what I did @adrianmcli :
Create a file in src: MyComponent.css.js, containing this code

export default ` 
.my_component {
    color: green;
    font-size: 20px;
   ... more css here...
`;

Note the backticks so it exports the css as a big multiline string.

Then in my component js:

import cssStyles from './MyComponent.css';

...and in my render method:

    if (!document.getElementsByTagName('head')[0].querySelector('style[id="my-component"]')) {
      // insert the style into the head
      let tag = document.createElement('style');
      tag.id = 'my-component';
      tag.innerHTML = cssStyles;
      document.getElementsByTagName('head')[0].appendChild(tag);
    }

Voila!

from generator-react-component.

Is @peterh32 answer valid for adding CSS to React-Components ??

from generator-react-component.

any responses @sahilchaddha ?

from generator-react-component.

@adutta91 Yes it is, but its not the recommended way. Its a workaround to save css in string format and inject it directly into html. This does not minify CSS.

from generator-react-component.

Hi,
Did anyone solve it so far?
also, is it possible to also load .png files?
in my react component (created with create-react-app) I used both css and png

from generator-react-component.

Just a note: I kinda solved the .css and .png problem:
-for css:
just copy your .css files into /dist/ and make sure on the README.md page explains how to directly import them, e.g.

Import 'myComponent/dist/css/myStyle.css';

-for png and svg:
Just convert the files to base64 and add them directly to your code, use something like: https://www.base64-image.de for png or http://b64.io for svg to parse the files, I know.. it's not the fastest way, but it works.

from generator-react-component.