The React ponent is great because it lets us define our own tags, which can be more powerful than the original ones.

Currently I am only using the React ponent to define the HTML structure, and setting the className of each tag to let the style sheet modify its appearance. Is there a way to give a default style to ponents without using inline CSS?

One idea I have is to add one CSS file associated with one ponent, or add a tag directly in the jsx file for each ponent, then pile the CSS or jsx to put all the CSS in one file and added it in part.

The React ponent is great because it lets us define our own tags, which can be more powerful than the original ones.

Currently I am only using the React ponent to define the HTML structure, and setting the className of each tag to let the style sheet modify its appearance. Is there a way to give a default style to ponents without using inline CSS?

One idea I have is to add one CSS file associated with one ponent, or add a tag directly in the jsx file for each ponent, then pile the CSS or jsx to put all the CSS in one file and added it in part.

• javascript
• css
• reactjs

Share Improve this question Follow edited Apr 21, 2015 at 22:49 Michael Laszlo 12.2k22 gold badges3232 silver badges4747 bronze badges asked Apr 20, 2015 at 6:24 ChengluChenglu 1,99722 gold badges1515 silver badges2626 bronze badges 3

• I do not think it is a clear solution to that atm. BUT at react conf in january they talked about their new "inline"-styling scheme which came with React-Native. With that you can create javascript objects which holds the styles. StyleSheet.create({ 'myComponent' : { margin: 5, padding: 5 }}); This lets you keep the ponent CSS apart and you could then add the css to your ponent structure. – magnudae Commented Apr 20, 2015 at 7:22
• Is this the inline style? I think it's better to let the user have the privilege to modified the style of the ponent via the style sheet. This will let us build ponents with beautiful UI as well as the Scalability. – Chenglu Commented Apr 20, 2015 at 9:46
• Its inline style, but you separate it in a .js file instead of .css. This means it almost has the same purpose as a stylesheet. The user would only need to alter one file. Here is an example from a React-Native project im working on: jsfiddle/0aqgxr5v PS: it works with React as well. – magnudae Commented Apr 20, 2015 at 10:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

It is easily expressed with inline style approach in React:

var pStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  margin: 5
};

React.render(<div style={pStyle}>Component</div>, mountNode);