15 Styling - biswajitsundara/react GitHub Wiki

We can apply the CSS styling to elements in react components.

//CustomerStyle.css

.primary{
    color: orangered;
}

//CustomerCard.js

import './CustomerStyle.css'
export const CustomerCard = () =>{

     return <h1 class='primary'> Hello Customer </h1>;
 }

//App.js

function App() {
  return <CustomerCard/>;
}

export default App;

For inline styling we need to create an object and then set the style attribute of the element.

//CustomerCard.js

export const CustomerCard = () =>{

    const heading = {
        fontSize: '72px',
        color:'blue'
    }

     return <h1 style={heading}> Hello Customer </h1>;
}

//App.js

function App() {
  return <CustomerCard/>;
}

export default App;

We can also write the styles directly in JSX

• Since style is an object so we will have two curly braces.
• For example style={} for dynamic styles and since style is an object style={{color:red}}

<a href="/create" style={{
                   color: 'white',
                   backgroundColor:'#f1356d',
                   borderRadius: '8px'
               }}>New Blog</a>

We can do the same use case using CSS modules.

• This is similar to CSS however has little difference.
• We need to have a style file with naming convention
• In the component - import the file and then use it.

//AppStyles.module.css
.success{
    color: green;
}

//CustomerCard

import styles from './AppStyles.module.css';

export const CustomerCard = () =>{
     return <h1 className={styles.success}>Success</h1>
 }

• The external css files (.css) have global scope
• However the style definitions in css modules file are scoped to specific components instead of globally.
• In CSS modules, it will not change the stylings of child components.