Question 245056 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to style Dialog with className property from styling sheet in mui5 using Emotion/styled

I try to style mui Dialog but it doesnt acceppt className even inside PaperProps. Inline styles are working but I would like to import styles from styling sheet called Styles

 <Styles>
      <div>       
    {dialogOpen ? (
      <Dialog
        className="dialog"
        onClose={() => setDialogOpen(false)}
        open={dialogOpen}
        PaperProps={{
          className="paper"
        }}
      >
        <DialogTitle className="title">TITLE</DialogTitle>
      </Dialog>
    ) : null}
  </div>
</Styles>

And this is styling file

import { styled } from "@mui/material";

const Styles = styled("div")(({ theme }) => ({
  "& .text": {
  backgroundColor: "red",
  },
  "& .dialog": {
   backgroundColor: "green",
 },
  "& .text": {
  color: "yellow",
  },
}));

export { Styles };
Tags:

2

Answers


  1. 0

    To style a Material-UI Dialog component using the className property with styles defined in a separate stylesheet, you can use the makeStyles function provided by Material-UI. Here’s how you can do it:

    First, create a separate stylesheet (e.g., Styles.js) to define your styles:

    import { makeStyles } from "@mui/styles";

const Styles = makeStyles((theme) => ({
  dialog: {
    backgroundColor: "green",
  },
  paper: {
    // Customize paper styles here
  },
  title: {
    // Customize title styles here
  },
}));

export default Styles;

    Now, import the Styles function into your component and apply the styles to your Dialog component:

    import React, { useState } from "react";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import Styles from "./Styles"; // Import your styles

function MyComponent() {
  const [dialogOpen, setDialogOpen] = useState(false);
  const classes = Styles(); // Initialize your styles

  return (
    <div>
      {dialogOpen ? (
        <Dialog
          className={classes.dialog} // Apply the dialog style
          onClose={() => setDialogOpen(false)}
          open={dialogOpen}
          PaperProps={{
            className: classes.paper, // Apply the paper style
          }}
        >
          <DialogTitle className={classes.title}>TITLE</DialogTitle> {/* Apply the title style */}
        </Dialog>
      ) : null}
    </div>
  );
}

export default MyComponent;

    In this code, we import the Styles function from your separate stylesheet and initialize it within your component. Then, we apply the generated class names to the corresponding components within your Dialog component.

    Make sure you have the necessary dependencies installed to use the makeStyles function and that you’ve set up your project to work with MUI version 5 or later, as the code provided is based on that version.

    Login or Signup to reply.
  2. 0

    Well you can try this

    import { styled } from "@mui/system";

const Styles = {
  Dialog: styled("div")({
    "& .paper": {
      backgroundColor: "green",
    },
    "& .title": {
      // Customize title styles here
    },
  }),
};

export default Styles;

    Now, import the Styles object into your component and apply the styles to your Dialog component:

    import React, { useState } from "react";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import Styles from "./Styles"; // Import your styles

function MyComponent() {
  const [dialogOpen, setDialogOpen] = useState(false);

  return (
    <div>
      {dialogOpen ? (
        <Styles.Dialog>
          <Dialog
            className="paper"
            onClose={() => setDialogOpen(false)}
            open={dialogOpen}
          >
            <DialogTitle className="title">TITLE</DialogTitle>
          </Dialog>
        </Styles.Dialog>
      ) : null}
    </div>
  );
}

export default MyComponent;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search