• jQuery
  • JavaScript
  • PHP
  • Core Java
  • JSP
  • RubyonRails
  • Struts
  • Servlet
  • Spring

  • <

    Reactjs CSS

    Different ways to style components.

    li>Inline Styling

    li>CSS Stylesheet

    li>CSS Module

    li>Styled Components

    React inline styling Example



    
    import React from 'react';  
    import ReactDOM from 'react-dom';  
      
    class App extends React.Component {  
      render() {  
        return (  
          <div>  
          <h1 style={{color: "Green"}}>Hello JavaTpoint!</h1>  
          <p>Here, you can find all CS tutorials.</p>  
          </div>  
        );  
      }  
    }  
    export default App; 
    


    React CSS Module


    app.js
    
    
    import React from 'react';  
    import ReactDOM from 'react-dom';  
    import styles from './myStyles.css';   
      
    class App extends React.Component {  
      render() {  
        return (  
          <div>  
          <h1 className={styles.mystyle}>Hello World</h1>  
          <p className={styles.parastyle}>It provides great CS tutorials.</p>  
          </div>  
        );  
      }  
    }  
    export default App;  
    


    myStyles.css
    
    .mystyle {  
      background-color: #cdc0b0;  
      color: Red;  
      padding: 10px;  
      font-family: Arial;  
      text-align: center;  
    }  
      
    .parastyle{  
      color: Green;  
      font-family: Arial;  
      font-size: 35px;  
      text-align: center;  
    }  
    
    
















    © copyright 2017-2021 Completedone pvt ltd.