Category: React Answers

Sometimes, we want to get input radio elements to horizontally align in React Material UI.

In this article, we’ll look at how to get input radio elements to horizontally align in React Material UI.

How to get input radio elements to horizontally align in React Material UI?

To get input radio elements to horizontally align in React Material UI, we can add the row prop to the RadioGroup component.

For instance, we write:

import React, { useState } from "react";
import { RadioGroup, FormControlLabel, Radio } from "@material-ui/core";

export default function App() {
  const [value, setValue] = useState();

  return (
    <div>
      <RadioGroup value={value} row onChange={setValue}>
        <FormControlLabel value="true" control={<Radio />} label="Yes" />
        <FormControlLabel value="false" control={<Radio />} label="No" />
      </RadioGroup>
    </div>
  );
}

We add the RadioGroup component with the row prop to disable the choices in a row.

And we set the onChange prop to setValue to set the selected choice as the value of the value state.

Inside RadioGroup, we add the FormControlLabel components and we set the control prop to <Radio /> to render the radio button.

The label prop are set to the values of the labels.

Conclusion

To get input radio elements to horizontally align in React Material UI, we can add the row prop to the RadioGroup component.

Sometimes, we want to import React Material UI icons.

In this article, we’ll look at how to import React Material UI icons.

How to import React Material UI icons?

To import React Material UI icons, we’ve to install the @material-ui/icons package.

Then we can import icons from it.

To install it, we can run npm install @material-ui/icons with NPM or run yarn add @material-ui/icons with Yarn.

Then we can import an icon and render it with:

import React from "react";
import { DeleteForever } from "@material-ui/icons";

export default function App() {
  return (
    <div>
      <DeleteForever />
    </div>
  );
}

We imported the DeleteForever icon with:

import { DeleteForever } from "@material-ui/icons";

And then we rendered it in App with <DeleteForever />.

Conclusion

To import React Material UI icons, we’ve to install the @material-ui/icons package.

Then we can import icons from it.

To install it, we can run npm install @material-ui/icons with NPM or run yarn add @material-ui/icons with Yarn.

Sometimes, we want to get the value in the React Material-UI autocomplete.

In this article, we’ll look at how to get the value in the React Material-UI autocomplete.

How to get the value in the React Material-UI autocomplete?

To get the value in the React Material-UI autocomplete, we can get the selected values from the onChange callback.

For instance, we write:

import React from "react";
import { TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";

const top5Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 }
];

export default function App() {
  return (
    <div>
      <Autocomplete
        options={top5Films}
        getOptionLabel={(option) => option.title}
        onChange={(event, value) => console.log(value)}
        renderInput={(params) => (
          <TextField {...params} label="Label" variant="outlined" fullWidth />
        )}
      />
    </div>
  );
}

We add the Autocomplete from the @material-ui/lab module.

And we set the options prop to the top5films array to add the options for the autocomplete.

Next, we set getOptionLabel to a function that returns the title property from the object in the options array prop.

To get the value that we selected, we set the onChange prop to a function with the value parameter in the 2nd position.

Finally, we set the render component to a function that renders a TextField to render the input box for the autocomplete.

We spread the params as props of the TextField.

And we set the label and variant to the values we want.

As a result, when we select a value, we should see the selected object in the top5films array logged.

Conclusion

To get the value in the React Material-UI autocomplete, we can get the selected values from the onChange callback.

Sometimes, we want to change font size of text field in React Material UI.

In this article, we’ll look at how to change font size of text field in React Material UI.

How to change font size of text field in React Material UI?

To change font size of text field in React Material UI, we can set the InputProps and the InputLabelProps prop to set the font size of the input box and the input label respectively.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <TextField
        label="label"
        margin="normal"
        InputProps={{ style: { fontSize: 40 } }}
        InputLabelProps={{ style: { fontSize: 40 } }}
      />
    </div>
  );
}

to set InputProps and InputLabelProps to { style: { fontSize: 40 } } so that the input box and the label both have font size 40px.

Conclusion

To change font size of text field in React Material UI, we can set the InputProps and the InputLabelProps prop to set the font size of the input box and the input label respectively.

Sometimes, we want to fix the issue where Grid in Material UI causes horizontal scroll in React.

In this article, we’ll look at how to fix the issue where Grid in Material UI causes horizontal scroll in React.

How to fix the issue where Grid in Material UI causes horizontal scroll in React?

To fix the issue where Grid in Material UI causes horizontal scroll in React, we can remove all the padding from the child grid items within the container.

For instance, we write:

import React from "react";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { Typography, Grid } from "@material-ui/core";

const theme = createTheme({
  typography: {
    fontFamily: [
      "Nunito",
      "Roboto",
      "Helvetica Neue",
      "Arial",
      "sans-serif"
    ].join(",")
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Grid container spacing={0}>
        <Typography variant="h3">hello world</Typography>
      </Grid>
    </ThemeProvider>
  );
}

to add the container prop to Grid to make it render as a container element.

Then we set the spacing prop to 0 to remove all spacing from the container element.

Now the container should stay in the page.

Conclusion

To fix the issue where Grid in Material UI causes horizontal scroll in React, we can remove all the padding from the child grid items within the container.