CODEWITHSUNDEEP
reactjsmaterial-uicomponentstextfieldstyled-components
vaitaka
vaitaka

Reputation: 25

How to customize the border color, width, and height of Material-UI Text Field with styled-components

I'm getting a bit confused about how to customize Material-UI components. I've read through the docs and a team member said that they use styled-components. I'm trying to change

I've tried various things for hours and still haven't figured it out. I'm admitting defeat and asking for help!

Here's what I'm trying to modify:

import styled from 'styled-components';
import TextField from '@material-ui/core/TextField'; 

export default function InputBox () {
  return (
    <TextField 
      id="outlined-basic"
      variant="outlined"
      label="Default"
      defaultValue="Input Text"
    />
  )
}

Upvotes: 0

Views: 7720

Answers (1)

hotpink
hotpink

Reputation: 3226

IIUC styled-components is not a requirement for you. MUI has several built-in ways to override styles, you can learn more about it here. Alternatively you can look at the many code examples for each component, which almost always include style overrides (click on the Show full source icon). In this case, Text Fields.

To make it a bit more obvious in my example below, I changed the style values, you just need to put in your own.

const { TextField, makeStyles } = MaterialUI

const useStyles = makeStyles({
  input: {
    width: 400,
    height: 150,
    '& input + fieldset': {
      borderColor: 'hotpink',
    },
  },
});

function InputBox() {
  const classes = useStyles();

  return (
    <TextField
      InputProps={{
        className: classes.input,
      }}
      id="outlined-basic"
      variant="outlined"
      label="Default"
      defaultValue="Input Text"
    />
  );
}

ReactDOM.render(<InputBox />, document.getElementById('root'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>

Upvotes: 5

Related Questions