Struggling to get the font-weights of the Typography and Button components in the new React with Material-UI to display

In both my previous and most recent React applications, I have the following code snippets:

<Typography
  variant="h6"
  color="inherit"
  noWrap
>
  h6. Heading
</Typography>

<Button
  type="button"
  size="large"
  color="primary"
>
  Primary button
</Button>

The labels in these code snippets have a font-weight: 500 on both my old and new apps. However, the issue is that while they appear with a "bold appearance" in my previous app and Material-UI demos, in my latest React app they only have a "normal font-weight" and require a font-weight: 550 to display as "bold text".

My most recent React application includes dependencies with an npm version of 6.8.0:

"@material-ui/core": "^3.9.2",
"react": "^16.8.2",

Do you know why this is happening? I have already attempted to render just a Typography and Button component without any container, yet they still show up with a normal font-weight.

cssreactjsmaterial-uicreate-react-app

Answer №1

It appears you are attempting to utilize h6, which is not yet available on Material UI's stable branch (it will be included in version 4.0.0).

Recommendation 1

To use h6 (and all other typography features in version 4.0.0) temporarily, you can include useNextVariants: true in your MUI theme:

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
});

Recommendation 2

If you need a quick fix now, consider using variant="title" instead of variant="h6", but keep in mind that this change will need to be updated when transitioning to version 4.0.0. Example code for the quick fix would look like this:

<Typography
  variant="title"
  color="inherit"
  noWrap
>
  h6. Heading
</Typography>

The reason why it may have worked in your previous applications could be due to the fact that you were possibly utilizing the "next", rather than the "stable" branch of Material UI.

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

Incorporate FontAwesome icons into table headers within an Angular framework

I am attempting to customize the icons for sorting in my table headers by following the guidelines laid out in the ng-bootstrap table tutorial. The NgbdSortableHeader directive plays a key role in changing the sorting of columns: @Directive({ selector: ...

htmlcssangularangular-fontawesome

The manner in which sessionStorage or localStorage is shared between different domains

I am looking to persist data across different domains using sessionStorage or localStorage. How can I achieve this? The data needs to be shared between a Vue project and a React project. English is not my strong suit, so I hope you are able to understand ...

javascriptreactjsvue.js

Tips for centering text in a dijitTextBox:

Ensure that the text is centered vertically with left padding and placeholder text included Check out the image link below: https://i.stack.imgur.com/PbHDa.jpg Snippet of my xPage code: <xe:djTextBox id="djTextBoxSearch" style="width:100%;height: ...

cssdojoxpagesdijit.form

Utilizing environment variables in index.html with Create React App

Is it possible to include environment variables, such as REACT_APP_MY_API, in the index.html file? I came across some information suggesting that it can be done (refer to this link), but I haven't been successful in getting it to work. .env File RE ...

reactjscreate-react-app

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

javascripthtmlcss

Error message: The content of the webpage does not align with the server-rendered HTML

I'm currently working on setting up next.js with Azure AD B2C using the MSAL (React) library. The MSAL library provides a convenient component called <MsalAuthenticationTemplate /> to handle authentication. To demonstrate this, I created a basi ...

reactjsazurenext.jsazure-ad-msalmsal-react

Tri-party class switch-up

I successfully implemented two radio buttons to toggle between alternative texts: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

javascriptjqueryhtmlcss

Issue encountered while running the command "npm start" on a recently generated project

I encountered an issue after creating a new ReactJS project and running "npm start" to launch it. This error has persisted across all my ReactJS projects, prompting me to create a new project to confirm that the error is not specific to one project. Here ...

node.jsreactjsnpmnpm-start

Dealing with 'ECONNREFUSED' error in React using the Fetch API

In my React code, I am interacting with a third party API. The issue arises when the Avaya One-X client is not running on the target PC, resulting in an "Error connection refused" message being logged continuously in the console due to the code running eve ...

javascriptreactjsnode.jsfetch-api

Tips for customizing container maxWidth based on breakpoints with muiTheme in material-ui

Trying to wrap my head around the usage of createMuiTheme and adjusting maxWidth for different breakpoints I've set up. Currently, these are the values I'm working with: import { Container as Container_, Grid } from '@material-ui/core' ...

reactjsgridmaterial-ui

Prevent event propagation when a CSS pseudo-element is active

In my project, there are two elements: .parentElement and .childElement. Both have the :active implemented to appear darker when pressed. The .childElement is nested inside the .parentElement. I am looking for a way to prevent the .parentElement:active fr ...

htmlcsspseudo-class

Tips for setting an image as the background on various mobile screen sizes

Is there a way to set an image as a background that will work effectively with multiple different mobile screen resolutions without distorting or cropping the image? For example, if I want the image to display correctly on both iPhone4 and iPhone6 without ...

htmlcssimage

Managing global variables and state within a React application that utilizes React Router

As a beginner in React, I am exploring ways to create a website with dark mode functionality. I plan to switch the data-theme in the CSS file when the toggle button is clicked. Here is a glimpse of my file structure inside App.jsx. ├── Header │ ...

reactjsreact-router

The initial click does not trigger a state update in React

I attempted to create a straightforward system for displaying data with two sorting buttons (ascending & descending). My approach involved fetching and displaying data from an array using the map method. In a separate component file, I utilized useEffect ...

javascriptreactjssortingnext.js

Difficulty arranging these elements in CSS

I'm attempting to achieve the following: (The black box represents a signup/login section, the blue is a navigation bar, and the red is a header area with some text content) I'm trying to reach this outcome with the following CSS: @import url(/ ...

htmlcss

What is the reason for not being able to retrieve a res.status(400) response outside of the catch block?

I have a couple of questions regarding my NextJS/Typescript website I'm working on! Currently, I have an authentication function on the front-end that is then processed by my backend server. The issue I am encountering is that the response status code ...

reactjsnext.jsbackend

Having trouble importing images in React and passing them as a prop?

I'm attempting to import images, place them into an array, and then pass that array to a prop in a component to display different images. However, after passing the array to the component, the items accessed from the array are showing as undefined, pr ...

javascriptreactjsimage

Datepicker from Material UI displaying at the top left corner

When I try to open the datepicker by clicking a button, it opens on the top left corner of the page. However, if I use a TextField instead, it works fine. <LocalizationProvider dateAdapter={AdapterDateFns}> <DatePicker ...

reactjsmaterial-uidatepicker

What is the best way to manipulate the canvas "camera" in HTML?

I am currently developing a 3D game that involves navigating through skyboxes. My goal is to have the camera respond to user input, specifically detecting key presses (using WASD controls) to move the camera accordingly. Do you have any suggestions on how ...

javascripthtmlcsshtml5-canvas

Proper method for verifying line-clamp in a Vue component

I came across a question that aligns perfectly with my current task - determining if text is truncated or not. The query can be found here: How can I check whether line-clamp is enabled?. It seems like my approach may not be accurate, so any guidance on ho ...

javascriptcssvue.js