What is the method for adjusting the subheader color on a Material UI card component?

How can I change the subheader text color to white in a Material UI Card with a dark background?

Here is my code:

const useStyles = makeStyles(theme => ({
  menuColor: {
    backgroundColor: theme.palette.primary.main,
    color: '#ffffff',
  },
}));

const ProfileUser = () => {
  const classes = useStyles();
  return (
    <Card elevation={0} className={classes.menuColor}>
      <CardHeader
        avatar={<Avatar />}
        title="Person name"
        titleTypographyProps="h4"
        subheaderTypographyProps="body1"
        subheader="Person role"
      />
    </Card>
  );
};

export default ProfileUser;
cssreactjsmaterial-ui

Answer №1

If you want to customize the subheader, one option is to pass a node to the subheader prop.

To achieve this, you can define a new makeStyle class with the desired color scheme:

const useStyles = makeStyles(theme => ({
    menuColor: {
      backgroundColor: theme.palette.primary.main,
      color: '#ffffff',
    },
    subColor: {
        color: '#000000'
    }
  }));

You can then apply this class when passing something to the subheader prop, typically using a MUI typography component like so:

<Card elevation={0} className={classes.menuColor}>
    <CardHeader
        avatar={<Avatar />}
        title="Person name"
        titleTypographyProps="h4"
        subheaderTypographyProps="body1"
        subheader={<Typography className={classes.subColor}>Person role</Typography>}
    />
</Card>;

Answer №2

Simply including CSS in the subheaderTypographyProps object is an effective way to make it work, as I discovered through my own experience.

Take a look at the example codes provided below:

<CardHeader 
    title={title} 
    subheaderTypographyProps={{ color: 'white' }} 
    subheader={`Release Date: ${release_date}`} 
    className={classes.title} 
/>

Answer №3

If you're looking for a quick solution that may not be ideal for long-term scalability, consider this alternative:

<Container>
  <Header
    title="Hey there"
    subtitle={<Typography style={{color: 'blue',}}>...You and I</Typography>}
  />
</Container>

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

Tips for inserting an element into every tier of a multi-layered array

I am faced with a challenging task of assigning an id field to objects within an array that has infinite levels. The rule is simple - for every level, the ID should correspond to the level number starting from 1. { "name": "Anything2&quo ...

javascriptarraysreactjsobject

I am facing an issue with Lotties having a black background in my NextJS project. Is there a way to make them transparent

I am facing an issue with my LottieFiles (JSON) displaying a black background when imported into my NextJS project. Despite trying to set background='transparent' on both the Player and parent div, the problem persists. I made sure to export my ...

javascriptreactjsjsonnext.jslottie

I am experiencing an issue where the data from Firebase is not being properly stored

I am encountering an issue with the following block of code: class PaintingPage extends Component { constructor(props){ super(props) this.state = { paintings: [] } this.database = this.database.bind(this); } database = () => { le ...

reactjsfirebasegoogle-cloud-firestore

Prevent any sliding animations of content when the button is triggered

I've implemented a basic slideToggle functionality in jQuery. You can check out the code on JSFiddle here: $(document).ready(function() { $(".panel_button").on('click', function() { $(".panel").slideUp(); var targetPanel = $(thi ...

jqueryhtmlcss

Displaying input fields in editable cells of a react-table should only happen upon clicking the cell

I've been experimenting with the react-table library and my goal is to create editable cells that only show an input box for editing when clicked. Unfortunately, I'm running into an issue where the input box appears constantly instead of just on ...

reactjsreact-tablereact-table-v7

Showing JSON data using CSS and HTML

Hello there! I've come across a coding hurdle today. I attempted to retrieve JSON data from a URL using the following PHP code snippet: <?php $url = "http://services.faa.gov/airport/status/LAX?format=json"; $ch = curl_init(); curl_setopt($ch,CURL ...

phpcssjson

To Ramda or not to Ramda, that is the question

Our team is currently debating whether or not to implement ramda in our project. The project consists of Typescript, with React on the front end and Nestjs on the back end. Here are the current pros and cons: Pros: The code is easy to read Pure function ...

reactjsfunctional-programmingnestjsramda.js

Trouble with Tailwind's apply function functionality

Can anyone explain why the @apply method remains in the CSS code as shown in the image instead of being compiled normally? View css inspection View actual css file ...

reactjsnpmtailwind-csscss-modules

Creating a transparent background in a three.js canvas: a step-by-step guide

I came across a wave particle animation on Codepen (https://codepen.io/kevinsturf/pen/ExLdPZ) that I want to use, but it has a white background. However, when I try to set the body background to red, it doesn't show up once the canvas is rendered. I ...

javascriptcssthree.js

How to make text in HTML and CSS stay at the bottom of a div?

I am in the process of creating a website dedicated to my "Starcraft II" clan. My goal is to have the navigation bar display the text "ALLOYE" and remain fixed at the bottom of the screen. I attempted to achieve this using the following code: vertical-alig ...

htmlcss

Creating an interface for React props

Hey everyone, I'm facing an issue and need some advice. I prefer using interfaces to maintain readability and utilize intellisense in my code. However, I'm struggling with implementing this approach when working with data passed through props. H ...

reactjstypescriptcomponents

What is the best way to incorporate animation into a React state?

Looking to implement a fade-in animation for the next index but struggling with tutorials using "react transition group" that are focused on class components or redux. const AboutTestimonials = () => { const [index, setIndex] = useState<any>(0 ...

javascriptreactjsnext.jsreact-animations

Issue: Experiencing multiple re-renders when attempting to send a post request to the backend using

export default function CRouter() { const [token, setToken] = useLocalStorage('auth', '') const [user, setUser] = useState(false); const GetUser = () => { if (token !== "" && !user) { axios.post(&apo ...

javascriptreactjs

Dropdown sidebar with collapsible sections

I am looking to create a unique navigation system for my website. I have a standard HTML list with menu items that will serve as anchor links on a long-scrolling page. My idea is to design it as a minimal vertical side navigation bar, where each item initi ...

htmlcssnavigation

Tips for resolving the "Unauthorized 401 error" when accessing JSON data from the back end on a React profile page

My current setup involves utilizing React and Express for this application. React is running on PORT 3000, while Express is running on PORT 3001. Authentication on the Express side is implemented using JWT. Here is an overview of my auth.js service file: ...

reactjsexpressauthenticationjwt

Elements in Motion

Working on a parallax effect, I've managed to assign unique scroll speeds to (almost) every element. Moreover, these elements are programmed not to activate their scroll speed until they enter the viewport. Below is the JavaScript code for trigger co ...

javascriptjqueryhtmlcssparallax

Having trouble establishing a default route with React Router v5

I am facing an issue with setting the default route to the home page in react router v5. Despite trying several methods, I cannot get it to work as expected. Index.js import React from "react"; import ReactDOM from "react-dom"; import ...

javascriptreactjsreact-routerreact-router-dom

Assessing the value of a variable or expression embedded within a string in Sass

Creating a mixin to set a div to transparent requires special attention to evaluate a variable in a string. The -ms-filter line must be quoted and should include the result of a calculation ($amount * 100). How can I successfully incorporate this into my ...

csssass

Hide a parent div in jQuery depending on the checkbox status

I have a code snippet that I need help with. You can view the code here. $("#filters :checkbox").change(function() { $(".listing-details > div").hide(); $("#filters :checkbox:checked").each(function() { $(".listing-details ." + $(this). ...

jquerycss

Having trouble deploying React app on AWS due to an encountered error

After learning from TestDriven.io on deploying React code to AWS, I'm facing a specific error: It's worth noting that the issue doesn't occur in the local environment. The Users API is functioning properly too. However, it's only on th ...

reactjsamazon-web-servicesdockeramazon-ecstestdriven.io