CODEWITHSUNDEEP
javascriptcssreactjs
Bluefire
Bluefire

Reputation: 14139

How should I style my singular react components using an external stylesheet?

Suppose I want to make a sidebar, and implement it as a component (one that only appears once on my page). I will need to use a #sidebar id to style my sidebar to make it appear on the side, as well as for other styles like font etc. Should I implement it like this:

<div id="sidebar">
    <SidebarContents/>
</div>

or like this:

<Sidebar/>
// ...
// in Sidebar.render:
render() {
    return (
        <div id="sidebar">
            // contents go here
        </div>
    );
}

Upvotes: 0

Views: 47

Answers (3)

Chalom.E
Chalom.E

Reputation: 697

<SidebarContents/> is a component, it should be rendered in render() Then, your SideBar will contain an <aside> html tag. Render it in app.js, in your header, like this it will be displayed on every page. Because in app.Js after the headers, there is your route. So just place your component in your app.js file like this 

import Sidebar from "./SideBarContentFile"; // ES6 Syntax
class App extends Component { 
render() {
return (
    <Router>
      <div className="App">
        <header>
             // place everything you want
        </header>
        <aside>
          <Sidebar/> // Sidebar is the component who contain the sideBar content
        </aside>
        // Here your route
        <main className="Content">
          <Route exact={true} path="/" component={Page_1} />
          <Route exact={true} path="/" component={Page_2} />
            ....
        </main>
      </div>
    </Router>
);
}}

Upvotes: 1

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11950

Just pass props to child div of SidebarContents 

<SidebarContents id="sidebar"/>

// in Sidebar.render:
render() {
    return (
        <div {...this.props}> // style, id, className, events, etc.
            // contents go here
        </div>
    );
}

Upvotes: 1

Gerard
Gerard

Reputation: 801

If you need the id name to be more flexible, you could add the id name through props:

// reference in parent component
<Sidebar id="sidebar" />


// in definition
render() {
    return (
        <div id={ this.props.id }>
            // contents go here
        </div>
    );
}

I wouldn't go with your first idea (nesting the component in a div), no need to add an additional element: it's less clear, and potentially less easy to manipulate and style.

Your second idea (adding the id in the components outter-most element), is fine. If that is clear and flexible enough for you, go with it.

Upvotes: 1

Related Questions