Изменить стиль текстового поля Material-UI на Focus, React - PullRequest
Новая
       23

Изменить стиль текстового поля Material-UI на Focus, React

0 голосов
/ 24 апреля 2020

Я изучаю Material-UI впервые. Я хочу настроить TextField материала интерфейса. Я могу изменить стиль текстового поля, когда оно не выбрано, я не могу изменить его стиль, когда оно сфокусировано. Я использую ThemeProvider для добавления стиля в компонент. Я пробовал этот код 

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

import {
  createMuiTheme,
  makeStyles,
  createStyles,
  Theme as AugmentedTheme,
  ThemeProvider
} from "@material-ui/core/styles";
import { orange, blue, green } from "@material-ui/core/colors";

const useStyles = makeStyles(theme =>
  createStyles({
    root: {
      color: green[900],
      "&.Mui-focused": {
        border:"2px solid blue",
    }
    },

  })
);

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

  return (
    <TextField
    variant='outlined'
    classes={{
      root:classes.root,
    }}      
    />
  );
}
const theme = createMuiTheme({
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme={theme}>
      <CustomCheckbox />
    </ThemeProvider>
  );
}

Вопрос:
Как изменить стиль TextField на фокус? Помощь будет оценена

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Чтобы настроить MUI TextField input element стили границ: 

const useStyles = makeStyles(theme =>
  createStyles({
    root: {
      color: green[900],
      "& .MuiOutlinedInput-root": {
        "& fieldset": {
          borderColor: "rgba(0, 0, 0, 0.23)"  // default
        },
        "&.Mui-focused fieldset": {
          border: "2px solid red"             // focus
        }
      }
    }
  })
);

Попробуйте онлайн: https://codesandbox.io/s/style-text-field-3unyl

enter image description here

Принят ответ кстати:

enter image description here

1 голос
/ 24 апреля 2020

На самом деле, после чего вы, вероятно, устанавливаете className для InputProps: 

<TextField variant="outlined" InputProps={{ className: classes.root }} />

Если вы также хотите удалить границу набора полей (или только контролировать эту границу), вы можете установить его с этим: 

const useStyles = makeStyles(theme =>
  createStyles({
    root: {
      color: green[900],
      "&.Mui-focused": {
        border: "2px solid red",
        '& .MuiOutlinedInput-notchedOutline': {
          border: 'none'
        }
      }
    }
  })
);

Вы можете найти рабочий пример здесь: Проверьте следующее: https://codesandbox.io/s/style-text-field-htbem?file= / src / App. js

Вы можете найти больше информации о различных классах, которые MUI использует с компонентом Input, здесь: https://material-ui.com/api/input/#css

...