Category: React Answers

Sometimes, we want to fix the custom color to Badge component not working with React Material UI.

In this article, we’ll look at how to fix the custom color to Badge component not working with React Material UI.

How to fix the custom color to Badge component not working with React Material UI?

To fix the custom color to Badge component not working with React Material UI, we can use the styled function to create a badge component with custom styling.

For instance, we write:

import React from "react";
import Badge from "@material-ui/core/Badge";
import MailIcon from "@material-ui/icons/Mail";
import { styled } from "@material-ui/core";

const StyledBadge = styled(Badge)({
  "& .MuiBadge-badge": {
    color: "yellow",
    backgroundColor: "green"
  }
});

export default function App() {
  return (
    <StyledBadge badgeContent={130}>
      <MailIcon />
    </StyledBadge>
  );
}

We call styled with Badge to return a function that we call with an object that has the custom badge styles.

We select the badge with the "& .MuiBadge-badge" selector.

And we set the color to 'yellow' and backgroundColor to 'green'.

Finally, we use the StyledBadge component that’s returned by styled with the badgeContent prop to add content into the badge.

And we should see that the badge text is yellow and the badge background is green.

Conclusion

To fix the custom color to Badge component not working with React Material UI, we can use the styled function to create a badge component with custom styling.

Sometimes, we want to remove underline from input component with React Material UI.

In this article, we’ll look at how to remove underline from input component with React Material UI.

How to remove underline from input component with React Material UI?

To remove underline from input component with React Material UI, we can set the disableUnderline prop to true.

For instance, we write:

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

export default function App() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Input
      disableUnderline
      value={age}
      onChange={handleChange}
      placeholder="age"
    />
  );
}

to add the disableUnderline to the Input component.

As a result, we wouldn’t see the underline of the input now.

Conclusion

To remove underline from input component with React Material UI, we can set the disableUnderline prop to true.

Sometimes, we want to change the dropdown icon in React Material UI select field.

In this article, we’ll look at how to change the dropdown icon in React Material UI select field.

How to change the dropdown icon in React Material UI select field?

To change the dropdown icon in React Material UI select field, we can set the IconComponent prop to a function that returns the icon component we want to render.

For instance, we write:

import React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Person from "@material-ui/icons/Person";

export default function App() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Select
      value={age}
      onChange={handleChange}
      IconComponent={() => <Person />}
    >
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  );
}

We set the Select‘s IconComponent prop to a function that returns the Person icon component.

And we add some MenuItem components to add some choices.

Now we should see the person icon as the drop down’s icon on the right.

Conclusion

To change the dropdown icon in React Material UI select field, we can set the IconComponent prop to a function that returns the icon component we want to render.

Sometimes, we want to change the height of the drawer with React Material UI.

In this article, we’ll look at how to change the height of the drawer with React Material UI.

How to change the height of the drawer with React Material UI?

To change the height of the drawer with React Material UI, we can set the PaperProps prop to an object with the style property.

For instance, we write:

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

export default function App() {
  return (
    <Drawer open PaperProps={{ style: { height: "90vh" } }}>
      <MenuItem>Menu Item</MenuItem>
      <MenuItem>Menu Item 2</MenuItem>
    </Drawer>
  );
}

We add the drawer by adding the Drawer component.

Then we set the PaperProps prop to { style: { height: "90vh" } } to set the drawer’s height to 90vh.

Finally, we add some MenuItems in the Drawer to add some content into the drawer.

Conclusion

To change the height of the drawer with React Material UI, we can set the PaperProps prop to an object with the style property.

Sometimes, we want to reference to theme’s primary color instead of a specific color in React Material UI.

In this article, we’ll look at how to reference to theme’s primary color instead of a specific color in React Material UI.

How to reference to theme’s primary color instead of a specific color in React Material UI?

To reference to theme’s primary color instead of a specific color in React Material UI, we can call the useTheme hook.

For instance, we write:

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

export default function App() {
  const theme = useTheme();

  return <span>{JSON.stringify(theme.palette.primary)}</span>;
}

We call useTheme to return the theme object.

Then we can get the colors from the theme with theme.palette.

Conclusion

To reference to theme’s primary color instead of a specific color in React Material UI, we can call the useTheme hook.