React Js

CSS in React js

February 23, 2021

What is CSS-in-JS?

“CSS-in-JS” refers to a pattern where CSS is composed using JavaScript instead of defined in external files.

Note that this functionality is not a part of React, but provided by third-party libraries. React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate *.css file as usual and refer to them using className.


Inline CSS

         <p style={{color:"white", backgroundColor:"gray", padding:"20px"}}>
      The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
      The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
      The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
    </p>

Internal CSS

  import React from 'react';

  var bg ={
    color:'white',
    backgroundColor:'gray',
    padding:'20px',
    FontFace:'verdana',
  }

  var btn={
    backgroundColor:'cyan',
    padding:'20px',
    border:'0px',
    borderRadius:'20px',
    margin:'10px'
  }


  function App() {
    return (
      <div className="App">

      <p style={bg}>
        The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
        The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
      </p>

      <button style={btn}>Click Me</button>

      </div>
    );
  }

  export default App;

External CSS

Here you can see it had some className , mentioned with camel case , if you want to assign class name to any division you have to assign className with camel case only

         <div className="groupOne">
    <div className="boxOne">
      <p>
        The quick bornw fox jumps over the lazy dog The quick bornw fox jumps over the lazy dog
      The quick bornw fox jumps over the lazy dogThe quick bornw fox jumps over the lazy dog
      The quick bornw fox jumps over the lazy dogThe quick bornw fox jumps over the lazy dog
      The quick bornw fox jumps over the lazy dogThe quick bornw fox jumps over the lazy dog
      The quick bornw fox jumps over the lazy dogThe quick bornw fox jumps over the lazy dog
      The quick bornw fox jumps over the lazy dog
      </p>
    </div>

Here you can see, that external css does not required any single or double quotate to execute css


  .groupOne{
    display: flex;
  }

  .boxOne, .boxTwo{
  width: 250px;
  height: 150px;   font-family: "Ephesis", cursive;
  font-size: 5rem;
  }