3

I am using reactjs and trying to get me css inside javascript and finally read the css from an external js file.

Here is the code: 

import React from 'react';
import ReactDOM from 'react-dom';

var styles = {
  container: {
    padding: 20,
    border: '5px solid green',
    borderRadius: 2
  }
};

var myComponent = React.createClass({
  render: function() {
    return (
      <div style={styles.container}>
        {this.props.name}
      </div>
    );
  }
});

This works fine but what I need to do is to put the css in an external file. So I've created a file called general.css.js

And I tried to import it:

import styles from './components/general.css';

I add this import to the top of the page with the other imports.

The problem is that it's not reading the styles.

What I'm I doing wrong here?

Improve this question
1
  • What do you mean by an external file ? Css or js file ? Commented Jan 31, 2017 at 12:30

3 Answers 3

Reset to default
3

Make a new file and put this code in it.

export const style = { container : { 
  padding: 20,
  border: '5px solid green', 
  borderRadius: 2 } 
};

Now in your component file.

import * as styles from './style/location/filename'

Now you can use styles in your render function.

return (
    <div style={styles.style.main}>
      <h3 style={styles.style.header}>Vote for your favorite hack day idea</h3>
    </div>
  );
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

But I want to do it this way: var styles = { container: { padding: 20, border: '5px solid green', borderRadius: 2 } }; but in an external file
@PaulTenna2000 I have updated the answer as per your requirements. Check it out.
3

You can directly import your css file in js.

import './style/app.css';

app.css

.page { background-color:#fafafa; }

and you can use this class in React component like below.

<div className="page">

Hope it works!!!!

Improve this answer

4 Comments

But I want to do it this way: var styles = { container: { padding: 20, border: '5px solid green', borderRadius: 2 } }; but in an external file
can you use style={styles.styles.container} in react component ?
Perfect. Along with you should appropriate loaders for css
if u want to use style in external file just make export const style = {container:{ padding: 20, border: '5px solid green', borderRadius: 2 } }; then in component js import * as styles from './style/location/filename' and you can use that as <div style={styles.style.container} >. Hope it will help you.
0

There is a little tool that automates translation from CSS to JSON representation.

Worth checking that out.

Note how the translation adds _ underscores:

div.redcolor { color:red; }
div:hover { color:blue; }

Into:

{"div_redcolor":{"color":"red"},"div_hover":{"color":"blue"}}

Note how the Vishwas Chauhan used starred method of ES6 import export:

enter image description here

In case you use this tool you get one big object, and you can use any method.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.