CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Tarun Singh
Tarun Singh

Reputation: 490

Material UI styles doesn't apply

I was trying to customize the default theme provided by Material UI but the styles don't apply. Please Help.

In My Header.js file when I try to customize the style won't get applied.

const useStyles = makeStyles((theme) => ({
  toolbarMargin: {
    ...theme.mixins.toolbar,
    marginBottom: '3em',
  },
  logo: {
    height: '7em',
  },
  tabContainer: {
    marginLeft: 'auto',
  },
  tab: {
    ...theme.typography.tab,     //The styles here is not applied.
    minWidth: 10,
    marginLeft: '25px',
  },
}));

My App.js file

import { ThemeProvider } from '@material-ui/core';
import React from 'react';
import Header from './ui/Header';
import theme from './ui/Theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Header /> Hello!
    </ThemeProvider>
  );
}

export default App;

My Theme.js file

import { createMuiTheme } from '@material-ui/core';

const arcBlue = '#0B7289';
const arcOrange = '#FFBA60';

const theme = createMuiTheme({
  palette: {
    common: {
      blue: `${arcBlue}`,
      orange: `${arcOrange}`,
    },
    primary: {
      main: `${arcBlue}`,
    },
    secondary: {
      main: `${arcOrange}`,
    },
    typography: {
      h3: {
        fontWeight: '300',
      },
      tab: {
        fontFamily: 'Raleway',
        textTransform: 'none',
        fontWeight: 700,
        fontSize: '1rem',
      },
    },
  },
});

export default theme;

My Header.js file

import {
  AppBar,
  makeStyles,
  Tab,
  Tabs,
  Toolbar,
  useScrollTrigger,
} from '@material-ui/core';
import React from 'react';

import logo from '../../assets/logo.svg';

function ElevationScroll(props) {
  const { children } = props;

  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0,
  });

  return React.cloneElement(children, {
    elevation: trigger ? 4 : 0,
  });
}

const useStyles = makeStyles((theme) => ({
  toolbarMargin: {
    ...theme.mixins.toolbar,
    marginBottom: '3em',
  },
  logo: {
    height: '7em',
  },
  tabContainer: {
    marginLeft: 'auto',
  },
  tab: {
    ...theme.typography.tab,     //The styles here is not applied.
    minWidth: 10,
    marginLeft: '25px',
  },
}));

const Header = () => {
  const classes = useStyles();
  return (
    <>
      <ElevationScroll>
        <AppBar position="fixed">
          <Toolbar disableGutters>
            <img className={classes.logo} src={logo} alt="company-logo" />
            <Tabs className={classes.tabContainer}>
              <Tab className={classes.tab} label="Home" />
              <Tab className={classes.tab} label="Services" />
              <Tab className={classes.tab} label="The Revolution" />
              <Tab className={classes.tab} label="About Us" />
              <Tab className={classes.tab} label="Contact Us" />
            </Tabs>
          </Toolbar>
        </AppBar>
      </ElevationScroll>
      <div className={classes.toolbarMargin} />
    </>
  );
};

export default Header;

Upvotes: 0

Views: 329

Answers (1)

Tarun Singh
Tarun Singh

Reputation: 490

There was a silly mistake I found.

  tab: {
    //...theme.typography.tab,  This was wrong, the styles here is not applied.
    ...theme.pallete.typography.tab,     //The styles gets applied.
    minWidth: 10,
    marginLeft: '25px',
  },

Upvotes: 1

Related Questions