Category: React Answers

Sometimes, we want to conditionally activate a React Material UI tooltip.

In this article, we’ll look at how to conditionally activate a React Material UI tooltip.

How to conditionally activate a React Material UI tooltip?

To conditionally activate a React Material UI tooltip, we can set the title prop of the Tooltip to an empty string.

For instance, we write:

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

const MyButton = ({ text }) => (
  <Tooltip title={text}>
    <Button>Do action</Button>
  </Tooltip>
);

export default function App() {
  return (
    <div>
      <MyButton text="hello world" />
      <MyButton text="" />
    </div>
  );
}

We create the MyButton component that takes the text prop.

And it renders a Tooltip with the Button to activate the tooltip.

Next, we render the MyButton component with text set to 'hello world' and another with text set to an empty string.

Only when we hover over the one with the text prop set to 'hello world' we’ll see the tooltip show with ‘hello world’.

When we hover over the 2nd one, we get nothing.

Conclusion

To conditionally activate a React Material UI tooltip, we can set the title prop of the Tooltip to an empty string.

Sometimes, we want to center a button in React Material UI.

In this article, we’ll look at how to center a button in React Material UI.

How to center a button in React Material UI?

To center a button in React Material UI, we can put the button in a Grid component.

And we set the justify prop of the Grid to 'center' and we set the container prop to true.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <Grid container justify="center">
        <Button color="primary" size="large" type="submit" variant="contained">
          Sign Up
        </Button>
      </Grid>
    </div>
  );
}

to add the Grid prop with the container and justify props.

We set justify to 'center' to center the items inside.

Next, we add the Button inside the Grid.

As a result, we should see that the Button is centered.

Conclusion

To center a button in React Material UI, we can put the button in a Grid component.

And we set the justify prop of the Grid to 'center' and we set the container prop to true.

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.