CODEWITHSUNDEEP
reactjs
PurplePanda
PurplePanda

Reputation: 673

How to style a react component correctly?

I am using react with a plain old css file. If I have a component I would like to be able to set it's position by adding then adding a margin to it. This isn't working for me though. Right now I can only put a around the component then style the div. I want to stack like 6 of the same components on top of each other so altering the style inside of component wouldn't work. What should I do here?

Upvotes: 1

Views: 75

Answers (1)

Mark Rabey
Mark Rabey

Reputation: 1405

If you're looking to add a class name passed as a property something like this:

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

class App extends React.Component {
    render() {
        return (
            <div>
                <MyComponent className="some-class" />
                <MyComponent className="another-class" />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root');

Then, in MyComponent you can add that class name to the div like this:

import React from 'react';

export class MyComponent extends React.Component {
    render() {
        return (
            <div className={ this.props.className }></div>
        );
    }
}

Upvotes: 1

Related Questions