如何使用样式组件自定义 Material-UI 文本字段的边框颜色、宽度和高度

Question

我对如何自定义 Material-UI 组件感到有点困惑。我已通读文档，一位团队成员说他们使用样式组件。我正在努力改变

• 将文本字段组件的边框颜色更改为 #cbb0b0
• 宽度为 200px
• 高度为 60 像素。

我已经尝试了几个小时的各种事情，但仍然没有弄清楚。我承认失败并寻求帮助！

这是我试图修改的内容：

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"
    />
  )
}

Answer 1

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.

为了使其在下面的示例中更加明显，我更改了样式值，您只需输入自己的值即可。

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>