Category: JavaScript

Sometimes, we want to create button with text under the icon with React Material UI.

In this article, we’ll look at how to create button with text under the icon with React Material UI.

How to create button with text under the icon with React Material UI?

To create button with text under the icon with React Material UI, we can set the flexDirection of the button container.

For instance, we write:

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

const useStyles = makeStyles(() => ({
  button: {
    height: 95
  },
  label: {
    flexDirection: "column"
  }
}));

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

  return (
    <div>
      <Button
        classes={{ root: classes.button, label: classes.label }}
        variant="raised"
        color="primary"
        disableRipple={true}
      >
        <Settings className={classes.icon} />
        Message
      </Button>
    </div>
  );
}

We call makeStyles with a function that has the label class property that sets flexDirection to 'column'.

Then we set that as the returned classes as the value of the classes prop.

As a result, we should see that ‘Message’ is below the settings icon.

Conclusion

To create button with text under the icon with React Material UI, we can set the flexDirection of the button container.

Sometimes, we want to style BottomNavigation in React Material UI.

In this article, we’ll look at how to style BottomNavigation in React Material UI.

How to style BottomNavigation in React Material UI?

To style BottomNavigation in React Material UI, we can use the makeStyles function.

For instance, we write:

import React from "react";
import Paper from "@material-ui/core/Paper";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  root: {
    color: "green",
    "&$selected": {
      color: "red"
    }
  },
  selected: {}
}));

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

  return (
    <div>
      <Paper>
        <BottomNavigation value={1} showLabels={true}>
          <BottomNavigationAction
            classes={classes}
            label="Home"
            icon={<RestoreIcon />}
          />

          <BottomNavigationAction
            classes={classes}
            label="Course"
            icon={<FavoriteIcon />}
          />

          <BottomNavigationAction
            classes={classes}
            label="Authors"
            icon={<LocationOnIcon />}
          />
        </BottomNavigation>
      </Paper>
    </div>
  );
}

We call makeStyles with a callback that sets the color of the content to green and the content of the selected button to red.

Then we call useStyles to return the classes which we apply to each BottomNavigationAction by setting the classes prop.

We also set the label prop to add text and the icon prop to add an icon.

The value prop sets the index of the BottomNavigationAction that is selected.

Therefore, the 2nd BottomNavigationAction is red and the rest are green.

Conclusion

To style BottomNavigation in React Material UI, we can use the makeStyles function.

Sometimes, we want to select part of text in a Textfield on onFocus event with Material UI in React.

In this article, we’ll look at how to select part of text in a Textfield on onFocus event with Material UI in React.

How to select part of text in a Textfield on onFocus event with Material UI in React?

To select part of text in a Textfield on onFocus event with Material UI in React, we can set the onFocus prop to a function that does the text selection.

For instance, we write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  const handleFocus = (event) => {
    event.preventDefault();
    const { target } = event;
    const extensionStarts = target.value.lastIndexOf(".");
    target.focus();
    target.setSelectionRange(0, extensionStarts);
  };
  return (
    <div>
      <TextField value="myfile.doc" onFocus={handleFocus} />
    </div>
  );
}

We set the onFocus prop to handleFocus.

The function calls preventDefault to stop the default focus behavior.

Then we call target.focus to focus on the text input.

Finally, we call setSelectionRange with the start and end index of the input value to highlight.

The character at the end index is excluded from the selection.

Conclusion

To select part of text in a Textfield on onFocus event with Material UI in React, we can set the onFocus prop to a function that does the text selection.

Sometimes, we want to position React Material UI Popper in the bottom right corner of the browser with JavaScript.

In this article, we’ll look at how to position React Material UI Popper in the bottom right corner of the browser with JavaScript.

How to position React Material UI Popper in the bottom right corner of the browser with JavaScript?

To position React Material UI Popper in the bottom right corner of the browser with JavaScript, we can set the popper’s modifiers prop.

For instance, we write:

import React from "react";
import Popper from "@material-ui/core/Popper";
import Button from "@material-ui/core/Button";

export default function App() {
  const [anchorEl, setAnchorEl] = React.useState();

  return (
    <div>
      <Button onClick={(e) => setAnchorEl(e.currentTarget)}>open</Button>
      <Popper
        className="popper-root"
        open={!!anchorEl}
        anchorEl={anchorEl}
        placement="bottom-end"
        modifiers={{
          offset: {
            enabled: true,
            offset: "0, 30"
          }
        }}
      >
        <div>hello</div>
      </Popper>
    </div>
  );
}

We set the modifiers prop to an object that has the offset property.

The property is set to an object that has enabled set to true to enable offset of the position.

Then we set offset to '0, 30' to move the popper down by 30px.

Conclusion

To position React Material UI Popper in the bottom right corner of the browser with JavaScript, we can set the popper’s modifiers prop.

Sometimes, we want to change the outline for OutlinedInput with React Material UI.

In this article, we’ll look at how to change the outline for OutlinedInput with React Material UI.

How to change the outline for OutlinedInput with React Material UI?

To change the outline for OutlinedInput with React Material UI, we can use the makeStyles function.

For instance, we write:

import React from "react";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  root: {
    "& $notchedOutline": {
      borderWidth: 0
    },
    "&:hover $notchedOutline": {
      borderWidth: 0
    },
    "&$focused $notchedOutline": {
      borderWidth: 0
    }
  },
  focused: {},
  notchedOutline: {}
}));

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

  return (
    <div>
      <OutlinedInput
        disableUnderline={true}
        notched={true}
        classes={classes}
        value={1}
      />
    </div>
  );
}

We call makeStyles with a callback to return the border styles.

We set all the borders to have width 0.

Then we call useStyles in App to return the classes.

Next, we set disableUnderline to true to remove the underline.

And set the classes prop to classes to remove the remaining borders.

Conclusion

To change the outline for OutlinedInput with React Material UI, we can use the makeStyles function.