Tips on handling various CSS styles for different layouts in ReactJS

Question

Tips on handling various CSS styles for different layouts in ReactJS

Dealing with two different layouts for the Front End and Admin End has presented a challenge for me. I have been including CSS files in the render function for both layouts, but unfortunately, they conflict with each other.

For the Front End layout:

import React, { Component } from "react";
import {  Switch, Redirect, Route } from "react-router-dom";

import Header from "components/FrontEnd/Header/Header";
import Footer from "components/FrontEnd/Footer/Footer";
import Menu from "components/FrontEnd/Menu/Menu";

class Frontend extends Component {
  render() {
    require("../../assets/fonts/frontEnd.css");
    return (
      <div className="section-frontEnd">
        <Header {...this.props} />
        <div id="main-panel" className="" ref="mainPanel">
          <Switch>
            //Routes Swichting ...
          </Switch>
          <Footer />
        </div>
      </div>
    );
  }
}

export default Frontend;

For the Admin End layout:

import React, { Component } from "react";
import {  Switch, Redirect } from "react-router-dom";

import Header from "components/Admin/Header/Header";
import Footer from "components/Admin/Footer/Footer";
import Sidebar from "components/Admin/Sidebar/Sidebar";

class Dashboard extends Component {
  render() {
    require('bootstrap/dist/css/Admin.css')
    return (
      <div className="wrapper">
        <Sidebar  />
        <div id="main-panel" className="main-panel" ref="mainPanel">
          <Header  />
          <Switch>
            //Routes Swichting ...
          </Switch>
          <Footer />
        </div>
      </div>
    );
  }
}


export default Dashboard;

I am seeking a more effective solution to resolve this issue. I should mention that I am not utilizing a webpack file in my project.

Folder Structure:

https://i.sstatic.net/sAC0U.png

css reactjs

Answer 1

Answer №1

To ensure harmonious layout, create a superclass for each page section and base all CSS on it. This approach minimizes potential conflicts between different page elements.

For instance:

.section-content #main-content{
  // CSS code here
}

.section-sidebar #main-content{
  // CSS code here
}

Answer 2

To ensure harmonious layout, create a superclass for each page section and base all CSS on it. This approach minimizes potential conflicts between different page elements.

For instance:

.section-content #main-content{
  // CSS code here
}

.section-sidebar #main-content{
  // CSS code here
}

Answer 3

Answer №2

import React, { useEffect } from 'react';

const LoadAdminStyles = () => {
  useEffect(() => {
    import('./admin.css').then(() => {
      // Admin CSS has been loaded
    });

    return () => {
      // Cleanup or remove the admin CSS if necessary
    };
  }, []);
};

const AdminLayout = () => {
  LoadAdminStyles();

  // Admin layout JSX here
  return (
    <div>
      {/* Admin layout content */}
    </div>
  );
};

export default AdminLayout;

const LoadUserStyles = () => {
  useEffect(() => {
    import('./user.css').then(() => {
      // User CSS has been loaded
    });

    return () => {
      // Cleanup or remove the user CSS if necessary
    };
  }, []);
};

const UserLayout = () => {
  LoadUserStyles();

  // User layout JSX here
  return (
    <div>
      {/* User layout content */}
    </div>
  );
};

export default UserLayout;

Answer 4

import React, { useEffect } from 'react';

const LoadAdminStyles = () => {
  useEffect(() => {
    import('./admin.css').then(() => {
      // Admin CSS has been loaded
    });

    return () => {
      // Cleanup or remove the admin CSS if necessary
    };
  }, []);
};

const AdminLayout = () => {
  LoadAdminStyles();

  // Admin layout JSX here
  return (
    <div>
      {/* Admin layout content */}
    </div>
  );
};

export default AdminLayout;

const LoadUserStyles = () => {
  useEffect(() => {
    import('./user.css').then(() => {
      // User CSS has been loaded
    });

    return () => {
      // Cleanup or remove the user CSS if necessary
    };
  }, []);
};

const UserLayout = () => {
  LoadUserStyles();

  // User layout JSX here
  return (
    <div>
      {/* User layout content */}
    </div>
  );
};

export default UserLayout;

Tips on handling various CSS styles for different layouts in ReactJS

Answer №1

Answer №2

Similar questions

Even though I included a key prop for each item, I am still encountering the error message stating that every child in a list should have a distinct "key" prop

How can we dynamically retrieve an image from the database in React in order to display it on the user interface?

What is the most effective method to indicate "justify" for a grid item in material-ui?

What is the process for importing types from the `material-ui` library?

Changing the color of a specific IconButton upon clicking in ReactJS

Tips for defining boundaries for position absolute elements using JavaScript

What is the best way to incorporate a variety of colors into a single element?

The combination of two tags can create a powerful and impactful presence

React: Blur input element when escape key is pressed

Ensure that the text is wrapped properly when implementing innerHTML functionality

What is the method to retrieve text from a div element with Webdriver-IO?

Is it possible to create a button function in HTML that can alter the CSS image tag?

Error alert: Blinking display, do not dismiss

Placement: fresh column in absolute position

Tips on disregarding events within an html table

Include a new item into the existing one and iterate through the information within it

Unable to transfer props object to React component using TypeScript

I am having trouble getting the (:active) pseudo-class to function properly with the menu on my WordPress theme

The skipping of crucial text in tab focus is adversely affecting the accessibility of the website

What is the best method for performing a basic POST request in NextJS 13.4 API with the new App Router, utilizing Response, NextAPIResponse, and NextResponse?