Can you explain how to utilize theme values in CSS within Mui?

Working on my React app with mui themes, I have the following in index.js:

let theme = createTheme({
  palette: {
    primary: {
      main: "#00aaa0",
      contrastText: '#fcf4d9',
    },
    secondary: {
      main: "#D55B3E",
      contrastText: '#fcf4d9',
    },
  },
});

theme = responsiveFontSizes(theme);

ReactDOM.render(
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  document.getElementById('root')
);

In one of my components (footer), I am trying to add a top border in the primary color. Currently, footer.tsx has:

const Footer= () => {

  return (
    <div className="pageFooter">Footer Text</div>
  );
};

export default Footer;

I want to style the "pageFooter" so that it uses theme.palette.primary.main as the top border color. In regular CSS, I would do:

.pageFooter {
  border-top: 2px solid "#00aaa0";
}

But I want to ensure consistency with the primary color, so I attempted:

.pageFooter {
  border-top: 2px solid theme.palette.primary.main;
}

Unfortunately, this approach does not work as the theme is not accessible to the CSS file. I've reviewed the documentation but still confused. Can anyone provide guidance on the correct approach?

cssreactjsmaterial-ui

Answer №1

Now, MUI version 5.6.0 has introduced support for an experimental feature. This feature allows them to export theme variables as CSS variables. For more information, you can refer to the documentation.

Here is an example:

/* custom-styles.css */
.custom-section {
  background-color: var(--mui-palette-grey-50);
}

Answer №2

import { makeStyles } from '@material-ui/core'

const customStyles = makeStyles(theme => ({ 
   pageFooterStyle: {
     borderShade: theme.palette.primary.main,
   }
});

const FooterComponent= () => {
    const generatedClasses = customStyles()

  return (
    <div className={generatedClasses.pageFooterStyle}>Footer Content</div>
  );
};

export default FooterComponent;

Answer №3

As per the documentation provided by MUI:

@mui/styles serves as the older styling solution for MUI, relying on JSS which is no longer utilized in @mui/material and has been deprecated in version 5.

In addition,

@mui/styles is not compatible with React.StrictMode or React 18.

MUI implements JSS for styling purposes, eliminating access to themes in CSS files. Here's a workaround: you can set a CSS variable matching your theme's palette color and utilize it in your CSS files.

:root {
    --primary-main: #00aaa0;
}
.pageFooter {
    border-top: 2px solid var(--primary-main);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Place two divs side by side with the second div filling up the remaining space on the line

Hello there, can anyone lend a hand with this problem? This is the code I have been working with: <html> <body> <div style="width=100%"> <div style="float:left; background-color:Red; height:100px">Red</div> <div st ...

htmlcss

What could be causing the issue where only one of my videos plays when hovered over using UseRef?

I'm currently working on a project where I have a row of thumbnails that are supposed to play a video when hovered over and stop when the mouse moves out of the thumbnail. However, I've encountered an issue where only the last thumbnail plays its ...

javascriptreactjstypescriptnext.jsreact-hooks

Is there a way to display the drawer component from Material UI only on specific routes using routing in ReactJS with MaterialUI?

In my react project, I have implemented a material-UI drawer component. The issue I am facing is that the drawer component contains the page content within itself. Previously, I managed to integrate routes using react-router-dom with the drawer. My current ...

javascriptreactjsmaterial-uireact-router-domdrawer

Programmatically set a custom Drawable background for Material Chip

Looking for assistance to achieve a specific UI layout using Material Chips. The image below showcases the desired design: These chips are of the filter type. The challenge lies in adding these chips dynamically to the view, based on API responses. There ...

androidkotlinmaterial-uimaterial-designandroid-chips

Reviewed and verified one package in 513 milliseconds with no vulnerabilities detected

After deleting my node_modules folder, as well as package.json and package-lock.json, I tried running npm install. Surprisingly, the response was: "up to date, audited 1 package in 513ms found 0 vulnerabilities", but no new node_modules were inst ...

node.jsreactjsnpmnode-modules

Creating a box that is connected by lines using JSON data requires several steps. You

I am attempting to dynamically draw a line using the provided JSON data. I have heard that this can be easily achieved with flexbox. Important: I would greatly appreciate a solution involving flexbox This is what I hope to achieve: https://i.stack.imgu ...

javascriptjqueryhtmlcss

Issues with CSS3 Animation failing to trigger upon hovering over links

Background: Looking to design a visually appealing hover effect for links in the future Current Demo Link: You can view the demo here specifically on Firefox Browser. body { color:#ffffff; font-family:"Helvetica"; font-size:12pt; backgr ...

htmlcsscss-animations

Basic alignment in a table and on a webpage using HTML

I have a basic HTML table that needs some alignment adjustments. <table align="center" border="1" cellpadding="0" cellspacing="0" style="width:1000px"> <thead> <tr> <th scope="row">BB<br /> ...

htmlcsshtml-table

Preventing Users from Selecting Past Dates in Material-UI datetime-local TextField

I am striving to prevent selection of past dates but have not been successful so far. Below is the code snippet: <TextField variant="outlined" id="datetime-local" label="Select Date and Time" placeholder="Sele ...

javascriptreactjsmaterial-ui

Ways to create a responsive Instagram iframe without using JavaScript

Currently, I am attempting to create a responsive grid featuring Instagram posts. Unfortunately, the padding-bottom hack isn't effective for my particular situation. After some experimentation, I discovered that the height could be calculated by addin ...

jquerycssiframeinstagramresponsive

I encountered an issue with route handlers in Next.js version 13.2. Sadly, they are not

I am trying to implement an API on my website with the endpoint /api/popular-movie. Here is an overview of my file structure: https://i.stack.imgur.com/e8Pf8.png Additionally, this is my route.ts code: import { NextResponse } from "next/server"; ...

javascriptreactjsapinext.jsfrontend

A simple guide to positioning an image between two lines of text with Material UI

I am trying to design a banner area with an icon on the left and two lines of text (title and sub-title) in the middle. However, when I implement this structure, each element appears on a separate line. You can view the issue here: https://codesandbox.io/ ...

javascriptmaterial-ui

What is the best way to create divs that can close and hide themselves when clicked from inside the div itself?

I have a situation in my code where clicking a link reveals a div, and then the same link must be clicked again to hide it. However, I want to modify this so that any link within the div can also hide it when clicked. I currently have eight divs set up lik ...

javascriptjquerycsshtmlshow-hide

Robotic Arm in Motion

GOAL: The aim of the code below is to create a robotic arm that consists of three layers (upper, lower, and middle), all connected to the base. There are four sliders provided to independently move each part except for the base which moves the entire arm. ...

javascripthtmlcsshtml5-canvaswebgl

Container that displays vertical scroll while permitting floating overflows

Is there a way to set up a container so that when the window size is too small, it displays a scroll bar to view all elements that don't fit in one go? At the same time, can the child containing floating elements be allowed to extend beyond the bounda ...

cssreactjstypescriptmaterial-ui

Establish the initial state by pulling data from the rehydrated Redux store

Within my application, a dialog window is present with multiple input fields. My goal is to store the user's input in the component's state and then, during the "onClose" event of the Dialog, send that input to a Redux store using the "dispatch" ...

reactjsreduxmaterial-ui

Resetting forms in React upon submission

After successfully submitting a form using Axios, I'm facing an issue where the data in each text field remains on the page instead of getting cleared. I attempted to incorporate a resetForm function to reset the form back to its original blank state, ...

reactjsformsstate

Customize the design of a React Material-UI select dropdown by overriding

I am currently utilizing the React MUI Select Component for my forms, specifically for language selection. My issue arises when I need a different style for the dropdown menu of the language Select component. Overriding the relevant class would apply this ...

cssreactjsmaterial-uidropdown

Implement a call feature using ReactJS

My service method involves making a PUT call to an API with an ID parameter. However, I am facing issues with hitting the .put URL. Can someone please verify if this is the correct approach? ENDPOINTS = { SAMPLE: "/sample", }; Below is my ...

reactjstypescript

Nested styles container in JSS

While working with the React Material UI component TextField, I encountered a need to create a wrapper around it that allows for easy styling overrides. According to the documentation, there are two props that can help achieve this: 1) InputProps - This pr ...

reactjsmaterial-uijss