score:0

material ui uses inline styles, so to override it try:

<button style={{ fontfamily: 'roboto' }} label='styled button' />

or

<button labelstyle={{ fontfamily: 'roboto' }} label='styled button' />

score:0

it seems that there is another css rule with high priority in your stylesheet file that is styling your button with times new roman. using a browser, inspect your button element to see which css rule is setting the times new roman font and fix it.

it is important to remark that button component of material-ui is set by default its font-family with roboto

score:0

in button.js file:

import './button.css';

const button = ({ children }) => (
    <button>{ children }</button>
);

and then in button.css file:

button {
   font-family: "roboto"
}
  • { children } is the text in between the tags. so in the code above, { children } is passed in from the file that is using your custom button.

for example, if you are using ur custom button in signin.js:

import button from './button';

<div>
     // "sign in" is the { children }
     <button type="submit">sign in</button>
</div>

score:1

enter image description here

than import it inside app.js

import 'styles/font.css'


Related Query

More Query from same tag