import React, { Component } from "react";
import './navbar.css'
class NavBar extends Component {
render() {
return (
<div>
navbar content
</div>
);
}
}
export default NavBar;
If I were to include NavBar in another file and display it.
import React, { Component } from "react";
import NavBar from './NavBar'
import './differentfile.css'
class somefile extends Component {
render() {
return (
<div id="test">
<NavBar />
</div>
);
}
}
export default somefile;
How can I isolate the CSS styling for my navbar? I want to use components without having the CSS from other files affect them.
differentfile.css
#test div {
text-align: left;
}
^ This code aligns all div elements under #test to the left