Material-UI

React MUI Js
Web Development
Publish Date:   2023-08-09
Word Count:   173

Reminders for Myself

Responsive meta tag

Material UI is a mobile-first component library—we write code for mobile devices first, and then scale up the components as necessary using CSS media queries.

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your element:

<meta name="viewport" content="initial-scale=1, width=device-width" />

Two ways of implementing styled MUI components in code

First

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

const Style = makeStyles({ 
  root: {
    background: '#FE6B8B',
    border: 0,
    borderRadius: 3,
    color: 'red',
    height: 52,
    padding: '30px',
  },
});

export default functio testButton() {
  const classes = Style(); 
  return <Button className={classes.root}>testButton</Button>;
}

Second

import React from 'react';
import { styled } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const MyButton = styled(Button)({
  background: '#FE6B8B',
  border: 0,
  borderRadius: 3,
  color: 'Red',
  height: 52,
  padding: '30px',
});

export default function StyledComponents() {
  return <MyButton>testButton</MyButton>;
}
React MUI Js
  TOC