Issue with MUI DialogTitle Ignoring SCSS Customization

I've been attempting to integrate a Google font into the text found in a Material-UI DialogTitle component.

Here's my setup in App.module.scss:

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,600&display=swap');
$garamond: 'EB Garamond', serif;

.DialogTitle {
  font-family: $garamond; 
  font-weight: normal;
  font-size: 20px;
}

In App.tsx:

import s from "./App.module.scss";
import { Dialog, DialogTitle } from '@mui/material'
...
  <Dialog>
    <DialogTitle classes={{ root: s.DialogTitle }}>
      Title
    </DialogTitle>
  </Dialog

Despite these stylings being set up, the customized font does not display. Interestingly, when I apply a color attribute to the .DialogTitle, it works fine. What could be causing this unexpected behavior?

typescriptsassfontsmaterial-ui

Answer №1

To ensure that the custom styling takes precedence over the default MUI component styling, I utilized a combination of classes with varying specificity. Here is an example showcasing this concept:

.CustomTitle {
  font-family: $Helvetica; 
  font-weight: bold;
  font-size: 24px;
}

import cn from 'classnames';
<Dialog>
  <DialogTitle classes={{ root: cn(s.CustomTitle, s.TitleText) }}>
    Title
  </DialogTitle>
</Dialog

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 Redux action isn't triggering

The Redux action changePictogramsKeyword seems to be inactive and not firing. In the file where the action and reducer are defined (redux/module/keyword.js), the code is as follows: export const CHANGE_PICTOGRAMS_KEYWORD = 'CHANGE_PICTOGRAMS_KEYWORD ...

reduxmaterial-ui

Tips for emphasizing Material UI Textfield when initiating a modal?

Whenever I autofocus the textfield, it tends to lose focus as soon as I click into the modal section. This is where I have placed the modal content <NewOrgModal open={open} handleClose={handleClose} /> <Drawer variant='permane ...

reactjsmaterial-ui

Concealing .js files while working with .ts extensions

After installing TypeScript for Visual Studio 2015, I noticed that when I write a .ts file, it creates a .js file at the same level in my solution. Is there a way to hide the .js file or have it integrated within the .ts file so that I can simply expand ...

javascripttypescriptvisual-studio-2015

Error: The npm-link library encountered an invalid hook call

Problem Description: I am working on developing a package named eformless. To set up the package, I utilized CRA to create a directory named sandbox where I linked the package. However, I keep encountering an error when attempting to launch the sand ...

node.jsreactjstypescriptnpmnpm-link

Creating a key/value pair type in Typescript that mirrors the shape of an object within an array: How to do it?

Here is the data that I have: const pets = [ { type: 'cat', name: 'penny' }, { type: 'dog', name: 'Fido' }, { type: 'fish', name: 'Nemo' } ]; In order for a pe ...

typescript

Relaying numerous references in TypeScript

Having some trouble forwarding an object of refs in TypeScript and struggling with how to properly type them. Here are the refs and the way I'm passing them into my component. const storyRef = useRef<HTMLElement>(null); const parcoursRef = useR ...

reactjstypescript

Encountering an obscure package error while attempting to install an NPM package

After running the following command on my node application: npm install --save-dev typescript I encountered this error message: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="563a3f3426271667786e786e">[email pro ...

node.jspostgresqltypescriptnpmpackage-managers

Setting form values using Angular 9

I am currently facing a challenge that I could use some assistance with. My dilemma involves integrating a new payment system, and I seem to be encountering some obstacles. Here is a snippet of what I have: options: PaystackOptions= { amount: 5000, emai ...

javascriptangularjsangulartypescript

Asynchronous data fetching with React Hook useEffect does not properly populate the tooltip in Material UI component

After using useEffect to fetch data, I encountered a problem in passing the data to my component. Here is some of my code: User Data Types (UPDATED) export interface IUser { display_name: string; id: string; images: Image[]; } expo ...

javascriptreactjsreact-hooksmaterial-uifrontend

I am interested in incorporating RTL in some of my components, but not all of them

In my Nextjs project, I am looking to implement RTL (right-to-left) for certain components. These components are using material-ui. However, changing the direction in _documents.js with <HTML dir="rtl"> results in all components switching d ...

reactjsmaterial-uinext.jsright-to-leftdirection

Building a dynamic user interface using React and Material-UI components with a grid layout

I am currently working on a piece of code that involves a Grid layout: <Grid item xs={12}> <Grid container spacing={8} > <Grid item xs={3} ></Grid> { someState && <SomeComponent /> } </Gri ...

material-ui

What is the best way to place the Edit and Delete buttons alongside each grid item?

As I delve into working with Material UI for the first time, I am faced with a challenge of placing the edit and delete buttons next to each grid item. One approach I considered was mapping over the icons separately and rendering them within the grid. Howe ...

reactjsinputmaterial-uigrid

Declaring TypeScript functions with variable numbers of parameters

Is it possible to define a custom type called OnClick that can accept multiple types as arguments? How can I implement this feature so that I can use parameters of different data types? type OnClick<..> = (..) => void; // example usage: const o ...

typescript

A guide on implementing Redux Toolkit in an SPFX (typescript) project

I am currently working on developing SPFX components using typescript and webpack. My goal is to integrate redux toolkit into my project, but it is causing compilation errors. Here is what I have done so far: Created the project structure using yo Insta ...

typescriptreduxspfx

Identifying Gmail line breaks in the clipboard using Angular

I'm currently working on a feature that allows users to paste content from Gmail into a field and detect line breaks. The field doesn't have to be a text area, I just need to identify the line breaks. However, there seems to be an issue with det ...

angulartypescriptgmailclipboardpaste

What is the correct method to obtain a reference to the host directive within a ControlValueAccessor implementation?

Is there a proper way to connect two directives, or a directive to a component (which is a directive as well) in angular2 following the "angular way of writing code"? Given the limited documentation on angular2, any insights or references on this topic wo ...

typescriptangularangular-ngmodel

Is it possible to define react-router v6 routes within a functional component?

I have developed an application that requires users to log in before accessing it. I attempted to implement it using the following code: import React, {useState} from 'react'; import {Route, Routes} from 'react-router-dom'; import type ...

reactjstypescriptauthenticationreact-routerreact-router-dom

Tips for resolving the error: finding the right loader for handling specific file types in React hooks

data = [{ img: '01d' }, { img: '02d' }] data && data.map((item) => ( <img src={require(`./icons/${item['img']}.svg`).default} /> )) I am facing an issue with the message Error: Module parse failed: U ...

javascriptreactjstypescriptnext.js

Angular's observable data fail to show on the screen

I am facing an issue with passing the data of an Observable fetched via an API request to a component variable for display. I have been trying but unable to make it work successfully. Any assistance would be greatly appreciated. Here is my code. Thank you. ...

htmlangulartypescriptapibootstrap-5

Angular 2 ngFor generates a collection of rows and columns forming a single large column

It seems that ngfor is generating divs one by one, resulting in a poor design where they are stacked on top of each other. I would like to achieve a layout like this: [1] [2] [3] [4] [5] [6] However, the current outcome looks like this: [ 1 ] [ 2 ] [ 3 ...

javascriptangulartypescriptngfor