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

Internet Explorer will automatically apply a blue border to a div element when a CSS gradient is utilized

I'm attempting to create a gradual fading gray line by using a div that is sized at 1x100px with a CSS gradient applied for the fade effect. The only issue I am encountering is in Internet Explorer where the div is displaying a blue border which I am ...

cssinternet-explorergradientlinear-gradients

Tips for swapping out an item mid-scrolling?

What is the best way to change the navbar when scrolling a page in React? How can I achieve this while following React's concepts? Is using getElementById considered bad practice? const useState = React.useState const useEffect = React.useEffect con ...

javascriptreactjs

Include additional content in the mui datepicker widget

Is there a way to include additional text in the mui datepicker? https://i.stack.imgur.com/wj84R.png import React, { useState } from "react"; import { DateTimePicker, KeyboardDateTimePicker } from "@material-ui/pickers"; function Inlin ...

reactjsmaterial-ui

Is it feasible to utilize a CSS variable within a CSS "background URL" property?

Having trouble setting a base domain for all my pictures in a CSS file. Here's what I've tried: In global.css: :root { --bgd: #C0C0C0; --picdomain: "https://somedomain.com/"; } In s1.css: @import url("global.css"); body { background-co ...

cssbackground-imagecss-variablescss-import

Conceal flexbox item depending on neighboring element dimensions or content

I've encountered an issue while using a flexbox to display two elements side by side. The left element contains text, while the right one holds a number. When the value in the right element has at least 7 digits ( > 999,999 or < -999,999), I need to ...

javascriptcssangularjsflexbox

Collect information from forms and save it to a mobile phone number

Is it possible to forward form field details to a cell phone number via text message? Here is the code I currently have for sending form data to an email address. If any adjustments need to be made, please provide instructions. <?php if(isset($_POST[ ...

javascriptphphtmlcss

The table headers in the second table do not match the queryAllSelector

I've encountered an issue with my JavaScript snippet that displays a responsive table. When I use the snippet for a second table with the same class, the formatting gets messed up on mobile devices (try resizing your screen to see). It seems like the ...

javascriptcss

Using Rails to reference an image in CSS

My application on Heroku, built with Rails, features a striking image as the background on the landing page. Since Heroku's file system is read-only, I made the decision to store these images (selected randomly) on AWS S3. In my .css(.scss) code, the ...

cssruby-on-railsrubyamazon-s3sass

The React project is encountering an error labeled as 'TypeError: fs.existsSync is not a function', which seems to be linked to the file './node_modules/node-sass/lib/binding.js'

After spending a considerable amount of time troubleshooting, I find myself at a loss. I am currently working on developing a React application that requires simple API calls, but I keep encountering an error that is preventing my loadable component from r ...

reactjswebpackbindingmaterial-uinode-sass

The React DOM is rendered prior to performing the ajax request

Hey there! I'm new to using React and I've been working on a project that involves displaying charts using Fusion Charts. The challenge I am facing is getting the chart to render with dynamic data fetched from an API. Currently, the chart loads w ...

jqueryajaxreactjsfusioncharts

What is the more efficient approach: retrieving all data in one request or making individual requests for each piece?

When it comes to performance, which method is more efficient: 1) Retrieving 100 records in a single fetch request 2) Fetching each data row individually (100 times) P.S. I am using the axios library ...

reactjsaxios

Opera browser fails to render CSS3 box shadow effect

My menu features CSS3 effects on hover and active states, giving it a unique appearance. Below is the CSS3 styling I have implemented: #Menu a:active, #Menu a.active:before,#Menu a:hover:before { Content: ' '; position:absolute; z-i ...

cssopera

The withAuth module is not exported in the next-auth package for Next.js

I'm currently exploring how to implement a middleware on the /admin route in next.js. In my file "_middleware.js", I have the following code snippet: import { withAuth } from "next-auth/middleware"; export default withAuth({ callbacks: { au ...

reactjsnext.jsmiddlewarenext-auth

Can you explain the process of gathering texts based on CSS selector?

I wanted to place texts next to the div-class as shown in the following code snippets. <div class="review-contents__text">소재가 좀 저렴해 보이지만 그래도 입으면 휠씬 나아보여요</div> Initially, I wrote a code ...

pythoncssselenium

What is the process for establishing the initial route in next.js?

When setting up the initial route in React, the homepage is specified in the `package.json` file: { "name": "frontend", "version": "0.1.0", "private": true, "homepage": "http://lo ...

reactjsnext.js

turning off next.js server side rendering in order to avoid potential window is undefined issues

I am currently managing a private NPM package that is utilized in my Next.js project, both of which are React and Typescript based. Recently, I integrated a graph feature into the NPM package and encountered an issue where any reference to window within t ...

javascriptnode.jsreactjstypescriptnext.js

How to place a div within another div without using absolute positioning

I've been searching for a solution to this issue, but nothing seems to be working. I want the inner div to be positioned at the bottom of the outer div, with a 5px margin separating them. However, using absolute positioning disrupts the width and cent ...

jqueryhtmlcss

Issue with selecting the checkbox in material-table component when using useState in React.js

Hey there, I'm new to working with React and I've run into an issue with the Material-Table component. The checkboxes aren't getting selected when I use useState alongside onSelectionChange. I've set up a table and added an onSelectedCh ...

reactjscheckboxreact-hooksmaterial-table

When trying to return a string value from array.find(), I encountered an error stating that Objects cannot be used as a React child

The code snippet below shows that console.log(el.distance) is equal to a string. Despite this, whenever I attempt to return el.distance, React throws the error: Error: Objects are not valid as a React child (found: object with keys {item, distance}). If y ...

reactjsreturn

Search icon not appearing in Material UI TextField with type='search'

Recently, I've started learning React and have been utilizing Material UI components. My current project involves creating a simple SearchBar with a search icon. Everything seems to be working well so far, except that the clear icon is not being displ ...

reactjsmaterial-uitextfield