How To Style And Write CSS In React

styled jsx

import "./styles.css";
 
export default function App() {
  return (
    <div className='App'>
      <h1>
        Hello World
        <style jsx>
          {`
            h1 {
              color: whitesmoke;
              background: black;
            }
            .App {
              background: orange;
            }
            h2 {
              color: white;
            }
            img {
              border-radius: 50%;
              width: 250px;
              height: 250px;
              object-fit: contain;
            }
            img:hover {
              object-fit: cover;
            }
          `}
        </style>
      </h1>
      <h2>Wondering what’s even more challenging than choosing a JavaScript framework? You guessed it: choosing a CSS-in-JS solution. Why? Because there are more than 40 libraries out there, each of them offers a unique set of features.</h2>
      <img
        alt=''
        src=https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/JavaScript-Blog-Cover.png'
      />
    </div>
  );
}