Having trouble with the display of styles on Material UI Cards?

I am currently attempting to customize the default Material UI classes by using useStyles and applying a classname of titleSection. My goal is to make the titleSection bold and in Roboto font, but unfortunately, those styles are not being applied.

Below is my card:

function ImageCard(props: ImageCardProps) {
  const classes = useStyles();

  return (
    <Card>

      <CardHeader title={props.title} className={classes.titleSection} />
 
    </Card>
  );
}

Here is how I have defined my useStyles:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    
    
    titleSection:{
        paddingBottom: 0,
        fontWeight:'bolder',
        fontFamily:'Roboto',
    },
  })
);

Answer №1

If you're looking for a comprehensive explanation, the MUI documentation is a great resource: https://material-ui.com/api/card-header/

To customize the title styling using the 'classes' property, target the CSS rule named 'title' that surrounds the typography component.

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    title: {
      paddingBottom: 0,
      fontWeight: 'bolder',
      fontFamily: 'Roboto, sans-serif',
    },
  })
);

function ImageCard(props: ImageCardProps) {
  const classes = useStyles();

  return (
    <Card>
      <CardHeader title={props.title} classes={{ title: classes.title }} />
    </Card>
  );
}

If you prefer to apply these changes globally, explore the MUI theme object and theme override documentation:

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

The react navigation module in npm is overdue for an update

When I try to install the React Navigation module, it seems like there are dependencies on react-native even though I have already installed it in my package.json. What should I do? + [email protected] + [email protected] + [email protecte ...

Modify the color of the background for a flex-wrap list

I am facing a situation where I have a list with an unknown number of items, but I need to control the height of its container. To achieve this, I am using flex-flow: wrap column to split the list. The list starts off hidden and is displayed using jQuery&a ...

Troubleshooting problem: Unable to restrict table selections - issue with Material UI table in React

I seem to be overlooking the simple solution here. Currently, I have a ternary on my table. If the length of the selected array is greater than a certain number, a table with disabled checkboxes is rendered. I also implement a different handleClick functio ...

Issues with the background color of the bootstrap 'card' when implementing a QR code

How can I customize the background color for a Bootstrap card, specifically filling the entire card including the card text section? <div class="content"> <div class="card"> <img src="images/qr-code.png&q ...

Error encountered while using Material-UI proptype classes

I keep getting this warning message in my console: index.js:2178 Warning: Failed prop type: The prop classes is required in WithStyles(Grid), but its value is undefined. I have double-checked to ensure that classes are passed as a prop correctly. However ...

The feature of Jquery click and cursor: pointer only focuses on a single element at a

Recently, I created a navbar that includes a dropdown feature. I encountered an issue where I wanted the dropdown to show up when clicking on the navbar-profile class (which contains the profile picture, name, and chevron icon) in the top right corner. Ho ...

React-Testing-Library cannot locate component based on specified role and name

I am encountering an issue where React Testing Library (RTL) is unable to select an input with a dynamically-generated name. Despite the element being present in the container and having the correct role and name, RTL fails to detect it. Below is a snippe ...

Display a random div element in jQuery without specifying a specific class

I have a dynamic list that I am displaying in a div as shown below <div class="cards card1"> <div class="front"> <p>Front 1</p> </div> <div class="back1" style="display: none"> <p>Back 1</p> ...

Unable to output nested arrays as props in React JS to the console

Having retrieved data from a 3rd party API and stored the response in a state, I proceeded to pass an object within the response as a prop to another component. This represents the prop: { "count": 20, "games": [ { "id": 66947, "game_ ...

Importing a React component from a separate file

Currently utilizing the React Material-UI library, I am faced with a challenge in implementing a search 'filter' on the main/parent page that should trigger a Drawer component located in a separate file. While I grasp the concept of how this fun ...

I'm noticing that my Tailwind styles don't take effect until I redefine them. What could be causing

My Tailwind classes are giving me trouble. I faced an issue when I created a new component in the directory and placed my Button component there. Whenever I restart the project in terminal, the styles do not apply to my button unless I manually define th ...

The state variables of React components do not always retain their most recent value

Currently, I am working on implementing the functionality of an event based library called powerbi-client-react. The first step involves retrieving the component using getEmbeddedComponent and storing it in the variable report. Then, I need to utilize the ...

When trying to add a react-bootstrap modal, the react app crashes abruptly

Encountering errors while attempting to integrate react-bootstrap Modal component into my react project: ERROR in ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js Module not found: Error: Cannot resolve module 'react/lib/ReactComponentTreeHook' ...

The iPhone screen is unresponsive, causing the webpage to zoom in to the top left corner repeatedly

I've been wracking my brain trying to solve this issue, searching high and low on this site and others for a solution. I've attempted various configurations with the viewport meta tag, removing the fb-root div, ensuring there is no height=100%, b ...

Centering a div vertically within another div

Can you help me insert the flight duration in the middle-left section of each blue line? I've tried some methods but haven't been successful so far. This is the current layout: https://i.sstatic.net/edOfg.png Example on CodePen HTML structure ...

Converting HTML widget code to NEXTjs code for integration in an application (CoinMarketCap Price Marquee Ticker)

Having trouble integrating the CoinMarketCap Price Marquee Ticker Widget into my NEXTjs app. I'm outlining my process and hoping for some suggestions from others who may have attempted this. Template Code: To embed the widget in an HTML page, here is ...

How can I duplicate or extract all the formatting applied to a specific text selection in Ckeditor?

I am currently utilizing CKEditor version 3.6 within my Asp.net MVC 3 Application. One of my tasks involves creating a Paint format option similar to Google Docs. I am looking to integrate this feature into CKEditor. Is there a way in CKEditor to transfe ...

Opening the Gmail app from a link using JavaScript

What is the best way to open the Gmail app from a hyperlink? This link opens WhatsApp <a href="https://wa.me/">whatsapp</a> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a1f190f ...

The issue persists with react-hook-form and Material UI RadioGroup as the selected value remains null

Having trouble with RadioGroup from Material UI when using react-hook-form Controller. I keep getting a null selected value, even though my code seems right. Can you help me figure out what's missing? import * as React from "react"; import { ...

Vibrant Reverberation of Color

When creating a table connected to a MySQL database, I encountered an issue with changing the text color inside the rows. How can I display the text in white within the table? I attempted to use <style = color #34242, but it didn't produce the des ...