How to style form controls as TextField in material ui

user_3584499 0
Viewed 2918

I'm building a form with many TextField elements. In the form, there are other elements than TextField elements along with TextField elements. The problem is that they look quite different from TextFields. Take a look at the example below. https://codesandbox.io/s/material-ui-demo-forked-p8s87?file=/demo.js:488-520

As you can see, InputLabel doesn't work well with the element other than Input, while FormLabel doesn't look like the right alternative to InputLabel. What I exactly want is to replace Input as Link, other elements staying the same as with Input. What is the best practice to achieve this?

material-ui reactjs css
2 Answers
  • Main difference with InputLabel and FormLabel is that the InputLabel component adds an animation for us. The FormLabel component does not.
  • There are four different inputs that we can use in Material-UI, InputBase Input OutlinedInput and FilledInput.
  • The FormControl component in Material-UI is a wrapper class for an input component. It is good to use a form control when you are using any input components in Material-UI, like a checkbox, radio button, or a switch.

Hence it is good practice to use FormControl with TextField if you don't need some animation on your input control in form like "on focus", "leave focus" etc.

For more details understanding refere this link

user_13095030

Why dont you use Button You can use it like this:

import { Button } from "@material-ui/core"; 

<FormControl>
   <FormLabel shrink>hi</FormLabel>
   <Button color="primary" href="/link">hello</Button>
</FormControl>

<FormControl>
   <FormLabel shrink>hi</FormLabel>
   <Button variant="contained" color="primary" href="/link">hello</Button>
</FormControl>

<FormControl>
   <FormLabel shrink>hi</FormLabel>
   <Button variant="outlined" color="primary" href="/link">hello</Button>
</FormControl>

You can play around with color & variant but it'll give you a nice look for Link

Personally recommend you to check out Rsuite Library for other such UI components.

user_108000110
Related