CODEWITHSUNDEEP
reactjsmaterial-ui
KnightCrawler
KnightCrawler

Reputation: 720

how apply font feature settings in material UI makeStyles and change backgorundColor dynamically through props

I am trying to add font-feature-settings: 'pnum' on, 'lnum' on in material Ui makestyles React JS but it's giving me an error called unexpected token and how to pass backgroundColor props to change dynamically, below is my code


const useStyles=makeStyles({
    root:{
        backgroundColor: '#F8B817',
        '&:hover': {
            backgroundColor: "#F8B817",
         },
        width:'163px',
        height:'50px',
        borderRadius:'4px',
        fontFamily: 'Manrope',
fontStyle: 'normal',
fontWeight: 'bold',
fontSize: '12px',
lineHeight: '170%',
fontFeatureSettings: 'pnum' on, 'lnum' on;
        
    },
    

})

here is the button of material UI

 <Button  className={classes.root} disableRipple><p>{buttonText}</p></Button>

and here is the buttonText props that I am passing

  <Link style={{ textDecoration: 'none' }} to='/Dashboard'><Button onClick={handleSetLogIn} buttonText='Get Started'></Button></Link>

Upvotes: 1

Views: 1553

Answers (1)

Lashan Fernando
Lashan Fernando

Reputation: 1255

I think you missed quotations

import React from 'react';
import { Button, makeStyles } from '@material-ui/core';

const useStyles = (bgColor) =>
  makeStyles({
    root: {
      backgroundColor: bgColor,
      '&:hover': {
        backgroundColor: bgColor,
      },
      width: '163px',
      height: '50px',
      borderRadius: '4px',
      fontFamily: 'Manrope',
      fontStyle: 'normal',
      fontWeight: 'bold',
      fontSize: '12px',
      lineHeight: '170%',
      fontFeatureSettings: `'pnum' on, 'lnum' on`,
    },
  });

export const CustomButton = (props) => {
  const { buttonText, bgColor, ...rest } = props;
  const classes = useStyles(bgColor)();

  return (
    <Button {...rest} className={classes.root} disableRipple>
      <p>{buttonText}</p>
    </Button>
  );
};

And

<CustomButton buttonText={"Test"} bgColor={"red"} />

Upvotes: 2

Related Questions