Category: JavaScript

Sometimes, we want to mask a React Material-UI TextField.

In this article, we’ll look at how to mask a React Material-UI TextField.

How to mask a React Material-UI TextField?

To mask a React Material-UI TextField, we can use the react-input-mask package.

We install it by running npm i react-input-mask.

Then, we write:

import * as React from "react";
import TextField from "@material-ui/core/TextField";
import InputMask from "react-input-mask";

export default function App() {
  const [phone, setPhone] = React.useState();
  console.log(phone);

  return (
    <div>
      <InputMask
        mask="(0)999 999 99 99"
        value={phone}
        disabled={false}
        maskChar=" "
        onChange={(e) => setPhone(e.target.value)}
      >
        {() => <TextField />}
      </InputMask>
    </div>
  );
}

to add the InputMask component to add the input mask.

We render the Material UI TextField by using () => <TextField /> as the render prop of InputMask.

Next, we set the mask prop to the mask we want.

And we set onChange and value to set and get the input value respectively.

Conclusion

To mask a React Material-UI TextField, we can use the react-input-mask package.

We install it by running npm i react-input-mask.

Sometimes, we want to create a React Material UI dialog with a transparent background color.

In this article, we’ll look at how to create a React Material UI dialog with a transparent background color.

How to create a React Material UI dialog with a transparent background color?

To create a React Material UI dialog with a transparent background color, we set the BackdropProps prop to an object that has the invisible property set to true.

For instance, we write:

import * as React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";

export default function App() {
  return (
    <div>
      <Dialog open BackdropProps={{ invisible: true }}>
        <DialogContent>
          <DialogContentText>hello world</DialogContentText>
        </DialogContent>
      </Dialog>
    </div>
  );
}

We set the BackdropProps to { invisible: true } to remove the overlay from the dialog box.

Now the background should be transparent.

Conclusion

To create a React Material UI dialog with a transparent background color, we set the BackdropProps prop to an object that has the invisible property set to true.

Sometimes, we want to change the color of Select component’s border and arrow icon with React Material UI.

In this article, we’ll look at how to change the color of Select component’s border and arrow icon with React Material UI.

How to change the color of Select component’s border and arrow icon with React Material UI?

To change the color of Select component’s border and arrow icon with React Material UI, we can use the '&:before' and '&:after' selectors and apply the styles for them.

For instance, we write:

import * as React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

const color = "red";
const useStyles = makeStyles(() => ({
  select: {
    "&:before": {
      borderColor: color
    },
    "&:after": {
      borderColor: color
    }
  },
  icon: {
    fill: color
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <Select
        value="1"
        className={classes.select}
        inputProps={{
          classes: {
            icon: classes.icon
          }
        }}
      >
        <MenuItem value="1"> Foo 1</MenuItem>
        <MenuItem value="2"> Foo 2</MenuItem>
      </Select>
    </div>
  );
}

We call makeStyles with a function that returns an object with the select property set to an object with the drop down styles.

We set the borderColor style of the '&:before' and '&:after' selector to set the color of the border of the select.

Next, we selector the icon class and set the fill CSS property to color to set the color of the drop down arrow.

Then we call useStyles to return the classes, which we apply by setting the className of the Select to classes.select to set the bottom border color of the Select.

And we set the inputProps to an object with the icon property set to classes.icon to make the drop down arrow red.

Conclusion

To change the color of Select component’s border and arrow icon with React Material UI, we can use the '&:before' and '&:after' selectors and apply the styles for them.

Sometimes, we want to make a horizontal list with React Material UI.

In this article, we’ll look at how to make a horizontal list with React Material UI.

How to make a horizontal list with React Material UI?

To make a horizontal list with React Material UI, we can set the style of the List to have the display CSS property set to 'flex'.

For instance, we write:

import * as React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexDirection: "row",
    padding: 0
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <List className={classes.root}>
        <ListItem>
          <ListItemText primary="foo1" secondary="bar1" />
        </ListItem>
        <ListItem>
          <ListItemText primary="foo2" secondary="bar2" />
        </ListItem>
      </List>
    </div>
  );
}

We call makeStyles with a function that returns an object with the root class.

The root class property is set to an object that has the display property set to 'flex'.

This will make the list items display horizontally.

Next, we add the List into App.

And we add the ListItems into it.

Finally, we add ListItemText into the ListItems to add some text into each item.

Conclusion

To make a horizontal list with React Material UI, we can set the style of the List to have the display CSS property set to 'flex'.

Sometimes, we want to set Typography text color in React Material UI.

In this article, we’ll look at how to set Typography text color in React Material UI.

How to set Typography text color in React Material UI?

To set Typography text color in React Material UI, we can set the color and variant props.

For instance, we write:

import * as React from "react";
import Typography from "@material-ui/core/Typography";

export default function App() {
  return (
    <div>
      <Typography gutterBottom variant="h2" component="h2" color="secondary">
        hello world
      </Typography>
    </div>
  );
}

We set the variant prop to set the size of the text.

component sets the component to render the text as.

The color prop sets the color.

As a result, we should see large red text displayed on screen.

Conclusion

To set Typography text color in React Material UI, we can set the color and variant props.