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

Issue with border in a nested table within an HTML table

I am faced with an issue in styling nested tables. My goal is to have borders on both tables, but I specifically need only the bottom border of the inner table without the top, right, and left borders. The default border style can be achieved using the fol ...

htmlcss

Is there a way to customize the appearance of a MUI5 Tooltip using emotion?

I went through the information in this Stack Overflow post and experimented with the styled method. The code snippet I used is as follows: import * as React from 'react'; import { styled } from '@mui/material/styles'; import Tooltip, { ...

javascriptreactjstypescriptmaterial-uiemotion

The State Hook error "state variable is not defined" arises due to an issue with the state declaration in

function Header() { const [keys, setKeys] = useState([]); //custom addition const first = (e) => { var result = new Map() axios.post('http://localhost:8000/' + query) .then(function(response){ var content ...

javascriptreactjs

Launching a React application on Godaddy using GitHub deployment

I'm currently working on a react app hosted on GoDaddy. Every time I want to make changes live, I have to manually build the project, delete all previous files in cPanel, and add the new build file. Is there a way to automate this process so that when ...

reactjsgithubdeploymentautomation

Create a form in a React component that allows the user to input information

My challenge is to create a functionality where each time the add button is clicked, it should dynamically add an input field that I can save. It's similar to this example, but with inputs instead. The complexity arises from the fact that the inputs a ...

javascriptreactjsinputaddition

The problem with the CSS Grid effect

Looking for assistance in creating a grid layout similar to the one on this website: Upon inspecting the page source, I found the following code snippet: http://jsfiddle.net/o45LLsxd/ <div ng-view="" class="ng-scope"><div class="biogrid ng-scope ...

javascriptangularjshtmlcss

"Trouble with jQuery: Selecting an image to change isn't

Can someone help me figure out why my simple image change on a dropdown isn't working correctly? You can find the code on this Jsfiddle. Thank you for any assistance! $("#display_avatar").change(function(){ $("img[name=preview]").attr("src", $( ...

jqueryhtmlcss

Closing a modal from a nested modal sub-component

I am facing a query regarding how to close a Modal from within a sub-component of the same Modal itself. Allow me to elaborate on what I am trying to achieve here. I have developed a Modal that is triggered from a Component to enable users to add a new Cl ...

reactjsformsnext.jsmodal-dialog

Tips for enhancing filtering functionality in ReactJS

Is there a way to create a filter that will only display matching elements when the letters in first_name and last_name strictly match the beginning of the names? const filterContacts = ({first_name, last_name}) => { return first_name.toLocaleLowerC ...

reactjsfilter

The onChange function is not triggered when the dropdown menu consists of only one item

I am facing an issue with my dynamically populated dropdown menu. When the dropdown contains only one element, the onChange() function of my select tag does not work as expected. It functions perfectly fine when there are multiple elements present. How c ...

javascripthtmlreactjs

Make the text area occupy the full width of the remaining screen space

I've been struggling to make the text area fill the remaining width of the screen. Everything is set up nicely, but I just can't seem to find a solution to get it to expand and occupy the rest of the available space. I intentionally refrained fr ...

htmlcssformstextareaflexbox

applying a blur effect to the Vue modal mask

Trying to incorporate a blur panel behind my modal using vue.js, however, The issue arises when the modal-mask contains nested content. This makes it challenging to apply the filter: blur() property without blurring everything. Currently, I am only able t ...

htmlcssvue.js

Verify whether the value is in the negative range and implement CSS styling in React JS

I have been developing a ReactJS website where I utilize Axios to fetch prices from an API. After successfully implementing this feature, I am now looking for a way to visually indicate if the 24-hour change percentage is positive by showing it in green, a ...

htmlcssreactjs

plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // can be used selectively for specific modules options: { modules: ... } }) ]

const webpack = require("webpack"); const path = require("path"); const DIST_DIR = path.resolve(__dirname, "dist"); const SRC_DIR = path.resolve(__dirname, "src"); const config = { entry: SRC_DIR + "/app/index.js", output: { path: DIST_DI ...

reactjswebpackbabel-loader

Pictures without a set width

Hey there! I'm working on a responsive website and facing an issue with image resizing. When I shrink the screen size, the images also shrink along with it. How can I set a fixed width for the images? I tried switching from rem to px but that didn&apo ...

htmlcss

Exploring the Possibilities of Personalizing Data Tables

I have a unique requirement that I need help with: 1. On the mobile site, only 5 records should load by default with paginated data for subsequent pages. and 2. In desktop view, the default should be 10 records loaded with paginated data for subsequent ...

jqueryhtmlcssjquery-uidatatables

Ways to eliminate a particular element from the React state

I need help removing a specific item from my React state. Current scenario: When certain checkboxes are selected, I update their state accordingly. My useEffect hook has the checkboxes state as its dependency, and every time there is a change, I add cont ...

javascriptreactjsreact-hooks

In React production, the use of .map as a function is unavailable

While my express react app build runs smoothly locally with the map function, the transition to production triggers an error stating that 'map' is not a function. The error specifically points to the line declaring 'let returnlist'. Be ...

javascriptreactjsexpress

Tips for concealing tick labels in d3 using TypeScript

When trying to hide tick labels by passing an empty string to the .tickFormat("") method, I encountered an issue with Typescript. The error message received was as follows: TS2769: No overload matches this call. Overload 1 of 3, '(format: null): Axi ...

javascriptreactjstypescriptd3.js

Distinct vertical menus with varying widths but sharing the same CSS code for the submenus

How can I create a vertical menu bar with submenus on the right side? The first submenu appears correctly, but the second one is narrower than the first. It seems like they have the same code, yet they look different. Below is the HTML code: <div clas ...

htmlcss