Styling has been one of the building blocks of web development. Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. React only provides a virtual DOM, whereas the presentation part still lies with CSS.
Let’s create a simple div, and style it using inline CSS and flexbox. Then we will achieve same using external CSS and Bootstrap separately.
First, we need to create a React application. - Create a React app using create React app command. npx create-react-app.
This will create a simple React app , and now we will start making changes to this app. - First of all get rid of all the unnecessary stuff showing on DOM , remove all the lines in render of App.js. - Now we create a simple div parent div which will contain few div as child elements. - After creating that , your App.js will look like this - ``` import React from ‘react’; import ‘./App.css’;
function App() {{/_ End of Child Divs _/}
{/_ End of Parent Div _/}
); }
export default App;
```Now we will be adding CSS to this App to differentiate div and achieve this one by one using
then by using Bootstrap.
To Differentiate we will add background color simple padding and dividing parent div into flex box.
Using inline CSS
<div style={ { margin:"10px 0", backgroundColor:"orange", display:"flex"}} >background-color to each child div with some padding and flex basis. > <div style={{flexBasis:"25%",padding:"10px",backgroundColor:"green"}}>Child Div 1</div>App.js will look like -<div className="App">
{/* Start of Parent Div */}
<div style={{margin:"10px 0",backgroundColor:"orange",display:"flex"}}>
{/* Start of Child Divs */}
<div style={{flexBasis:"25%",padding:"10px",backgroundColor:"green"}}>Child Div 1</div>
<div style= {{flexBasis:"25%",padding:"10px",backgroundColor:"red"}} >Child Div 2</div>
<div style={{flexBasis:"25%",padding:"10px",backgroundColor:"blue"}}>Child Div 3</div>
</div>
{/* End of Parent Div */}
</div>Using external CSS
Create an external CSS file and add a parent class with same styling as you did in inline CSS. 2. Create a class for each child element. 3. Your CSS file will look like - - ``` .parent { margin: 10px 0; display: flex; width: 100vw; background-color: darkorange; } .child1 { flex-basis: 25%; max-width: 25%; padding: 10px; background-color: green; } .child2 { flex-basis: 25%; max-width: 25%; padding: 10px; background-color: red; }
.child3 {
flex-basis: 25%;
max-width: 25%;
padding: 10px;
background-color: blue;
}.
`
.parent div {
;
;
;
}
{
;
}
{
;
}
{
;
}
`
.
`
`
`
`
;
;
'
{
return (
<div className="App">
}
<div className="parent">
}
>
>
>
}
>
>
);
}
;
`col-3.backgroundColor as inline CSS to differentiate between child element div.App.js will look like -<div className="App">
{/* Start of Parent Div */}
<div className="row mt-2 mb-2" style={{backgroundColor:"darkorange"}}>
{/* Start of Child Divs */}
<div className="col-3 p-2" style={{backgroundColor:"green"}}>Child Div 1</div>
<div className="col-3 p-2" style={{backgroundColor:"red"}}>Child Div 2</div>
<div className="col-3 p-2" style={{backgroundColor:"blue"}}>Child Div 3</div>
{/* End of Child Divs */}
</div>
{/* End of Parent Div */}
</div>Combining different classes based on certain state/props.
ButtonComp which returns a button and adds a class btn-class as default class to the button in the component. Now if the component receives a prop as color, then an additional error class should be added to the button in that component.
className = "error btn-class"
className = "btn-class"
Incorrect Way -
<button className = { "btn-class" + this.props.color ? "error" : ""}>ButtonComp </button>
+ operator before this.props.color will try to parse it to integer value. Therefore it always takes the true value and displays error class.Incorrect Way -
<button className = { <button className = {this.props.color ? "error" : "" + "btn-class" }>ButtonComp </button>
error class will be displayed whereas if the color prop is not received by the component then an empty string "" + btn-class makes the className as btn-class.error class along with btn-class.Correct Way -
<button className = {this.props.color ? "btn-class error" : "btn-class" }>ButtonComp </button>
Correct Way -
<button className = {`btn-class ${this.props.color ? "error" : ""}`}>ButtonComp </button>
Wrong path provided while importing CSS.
If the path provided for external CSS file or module in the JSX file is incorrect then React throws an error i.e it will not be able to build the webpack. The error will look like -
Failed to compile.
- > ./src/App.jsCamelCase is supported in React for CSS styles. - Using class instead of className gives warning. - If any inline style property is used as two words like background-color, you will encounter an error. This is because these styles are not in a .css file. They are in JSX (Javascript extension for React), so it is actually a JS object; and JS cannot parse dashes. Also note the double curly-braces. The outer set of braces means “now instead of React JSX, what’s in these braces will be pure JavaScript.” style={}. Then inside is a JS object {backgroundColor: “red”}.
- > **Incorrect Way** - ``` <button style={{background-color:"red" }}> ```
- > **Correct Way** - ``` <button style={{backgroundColor:"red"}} > ```React Strap - Provides predefined components for React styled with Bootstrap.
<Button color="danger">Danger!</Button>import styled from 'styled-components' const Button = styled.button` background: transparent; border-radius: 3px; border: 2px solid palevioletred; color: palevioletred; margin: 0 1em; padding: 0.25em 1em; `