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

How can I ensure my useEffect function is properly redirecting?

I am looking to create a simple redirect feature that triggers when a user accesses a route without being logged in. To achieve this, I am using a conditional check on the currentUser.id property in props. Even though my console.log("here") message is be ...

reactjsreact-router

Unusual addition symbols in the Bootstrap stylesheet

Something unusual is occurring in my bootstrap css code. I am noticing strange plus signs that seem out of place, and I cannot pinpoint a reason for their existence. Here's an example (you might need to enlarge the view as they are quite small): Thi ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Extract reference value from an HTML element

Is there a way to access the ref prop from an HTML element using Testing Library React? My current code snippet is as follows: it('element container ref should be null if prop noSwipe is passed', () => { const onCloseMock = jest.fn() ...

javascriptreactjsjestjstesting-library

Ensure the webpage is set to have a minimum width of 1024 pixels

Is it possible to make a webpage that utilizes bootstrap, Angular 2x, and Scss stop being responsive once the screen width reaches 1024px? I would like the layout to stay fixed at this size and enable horizontal scrolling for users who resize their browser ...

htmlcsssass

Utilizing Angular Forms for dynamic string validation with the *ngIf directive

I have a challenge where I need to hide forms in a list if they are empty. These forms contain string values. I attempted to use *ngIf but unfortunately, it did not work as expected and empty fields are still visible in the list. How can I address this iss ...

javascripthtmlcssangulartypescript

Using the div tag will result in a new line being created

Whenever I try to create an element with a div, I notice there is always some space between the content and the border (blue line). On the other hand, using span causes the content to break, appearing outside the borders. Here is my CSS code: #m ...

htmlcss

The true meaning of CSS3 transition is often misconstr

I'm trying to create a simple linear transition effect, but for some reason it's not working. Any suggestions on what might be causing the issue? HTML <div class="button-modern" style="background-color:#e73032"> <span style="color: ...

jquerycsscss-transitions

Arrangement: Div beside vertically-aligned hyperlinks

Example code: p { color: red; } span { font-weight: bold; } <p>This is a paragraph.</p> <p>Another paragraph here.</p> <span>Bold text</span> This is the desired outcome: https://example.com/image.png It&ap ...

css

AngularJs - Show the response only upon verifying the correct answer

Let me provide an overview of what has been implemented so far: When a user selects an answer in radio buttons and clicks on "Check Answer", the system displays either "Correct" (in green) or "Incorrect" (in red) in the first answer field. Additionally, th ...

javascripthtmlcssangularjs

Adjust the horizontal background-position transition for color change while scrolling using jQuery and CSS

I came across a fascinating website - - where the background-position changes on scroll() from a linear gradient with two colors to smoothly slide one color off the screen. While I grasped how they achieved the split colors using linear-gradient, I'm ...

jquerycssscrollbackground-colorbackground-position

Is there a way to retrieve themeprovider/styled-components styles from the render method in React/NextJS?

I have my code setup working like this.... _app.js <ThemeProvider theme={clientGroupTheme}> <GlobalStyles /> <Layout> <Component {...this.props} /> </Layout> </ThemeProvider> someComponent.js import { ...

reactjsnext.jsstyled-components

Transient Flash of a jQuery Dropdown Menu

I'm currently developing a jQuery/CSS dropdown menu for a website, and everything is functioning well except for one issue. When navigating between sub-menu items, the text color of the selected main menu item briefly changes because of the CSS border ...

javascriptjqueryhtmlcss

What is the reason behind Redux choosing to use the term "Selector"?

The term "Selector" may be a bit confusing at first glance. In the official documentation, such as Computing Derived Data, it seems reasonable to refer to the mapping process as "select," as you are essentially choosing or filtering something specific fro ...

reactjsreduxnamingreselect

Changing the color of a div while implementing a show and hide effect in JavaScript

I have designed a checkout system with three distinct parts - shipping information, billing information, and order confirmation. These sections are all on the same page, allowing for a seamless flow during the checkout process. Once a customer completes t ...

javascriptjqueryhtmlcss

Is there a way to ensure that the content of my modal dialog only displays once when it is opened?

While working with Chakra UI, I encountered a unique issue that I hadn't faced before with Material UI. The problem arises when using the Chakra UI modal dialog - all components inside it get rendered twice upon opening. Despite attempting to disable ...

reactjstypescriptmodal-dialogchakra-ui

Create seamless communication between Angular application and React build

I am currently engaged in a project that involves integrating a React widget into an Angular application. The component I'm working on functions as a chatbot. Here is the App.tsx file (written in TypeScript) which serves as the entry point for the Rea ...

javascriptreactjsangulartypescriptarchitecture

What sets apart the components found in material-ui lab @material-ui/lab/ from those in material-ui core?

Although it may sound like a typical question, I am really impressed by the scalability of Material-UI compared to other React open source frameworks. Question: What is the difference between components in "@material-ui/core" and "@material-ui/lab"? Accor ...

reactjsmaterial-ui

How can you configure the grant type in IdentityServer4Provider with NextAuth?

My goal is to utilize NextAuth and IdentityServer4 for authentication. I have developed a custom provider as shown below: import NextAuth from "next-auth" import IdentityServer4Provider from "next-auth/providers/identity-server4"; expor ...

reactjsauthenticationnext.jsidentityserver4credentials

Ways to calculate outcome

I'm fairly new to PHP and have run into an issue regarding displaying the number of results. For example, showing 'There are 200 results'. Thank you in advance. Below is the code I am working with: try { $bdd = new PDO("mysql:host=localho ...

phphtmlcsssqlcount

Issue with React Lazy not functioning properly in Production Build

In my current project, I have implemented lazy loading for routes. While it works well locally, I am facing several issues when it comes to the production build. Whenever I try to redirect to one of the lazy routes, instead of accessing the chunk from the ...

reactjsreact-nativereact-reduxreact-router