CODEWITHSUNDEEP
reactjstypescriptmaterial-uijss
A LaMark
A LaMark

Reputation: 13

Typescript/React/MaterialUI/JSS project: override CSS for a single React component

I am trying to understand how to override the CSS/formatting/theme for just a single React component in a Typescript/React/MaterialUI/JSS project. Below is the code, however the {classes.gridStyle} within the JSX doesn't get processed (see screenshot below the code snippet). I can see it show up in the browser debugger as unmodified and the typescript editor is also giving me a warning that variable "classes" is never used.

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

const useStyles = makeStyles(() =>
  createStyles({
    gridStyle: {
      display: 'inline-block',
      padding: '0 20px',
      height: '40px',
    },
    '& div': {
      display: 'inline-block',
      fontSize: '10px',
      padding: '0 20px',
      height: '40px',
    },
  })
);

export default function HomeHeader(): JSX.Element {
  const classes = useStyles();
  return (
    <Grid item className="{classes.gridStyle}">
      Row 1 completely override css experiment...
    </Grid>
  );
}

Issue inside browser debugger

Upvotes: 0

Views: 383

Answers (1)

W-B
W-B

Reputation: 1277

className="{classes.gridStyle}">

should be

className={classes.gridStyle}>

Upvotes: 1

Related Questions