I have the problem during render the React + MUI data

[melody4482]

Hello
I want that the border color for the Mui textField remains black while the user enters or select data for the inputs field. however this does not happen. Still shows blue as in the photo. I wonder why.Here is the code: enter image description here.Here is the code.
I wonder why that is happening? I already created a theme . But stil..

import React, { useState } from 'react';
import { TextField, Button, Select, MenuItem, FormControl, InputLabel } from '@material-ui/core';
import { createTheme, ThemeProvider } from '@mui/material/styles';


interface FormState {
  minimumTripTemperature: number;
  tripLength: number;
  camping: number;
  rain: number;
}

const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiInputBase-input': {
            color: '#000000', // Change input text color
          },
          '& .MuiInputLabel-root': {
            color: '#000000', // Change input label color
            '&.Mui-focused': {
              color: '#000000', // Change input label color on focus
            },
          },
          '& .MuiOutlinedInput-root': {
            '&.Mui-focused fieldset': {
              borderColor: '#000000', // Change border color on focus
            },
          },
        },
      },
    },
    MuiSelect: {
      styleOverrides: {
        outlined: {
          '&:hover:not(.Mui-disabled):before': {
            borderColor: '#000000', // Change select menu border color on hover
          },
          '&:before': {
            borderColor: '#000000', // Change select menu border color
          },
          '&.Mui-focused fieldset': {
            borderColor: '#000000', // Change border color on focus
          },
        },
        icon: {
          color: '#000000', // Change select menu icon color
        },
      },
    },
  },
});


const Form = () => {
  const [formState, setFormState] = useState<FormState>({ tripLength: 0, camping: 1, minimumTripTemperature:5, rain:1 });
  const [selectedCamping, setSelectedCamping] = useState<number>(1);
  const [selectedRain, setSelectedRain] = useState<number>(1);

  const handleTripLengthChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = event.target;
    setFormState((prevState) => ({ ...prevState, tripLength: parseInt(value) }));
  };


  const handleMinimumTripTemperatureChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = event.target;
    setFormState((prevState) => ({ ...prevState, minimumTripTemperature: parseInt(value) }));
  };


  const handleCampingChange = (event: React.ChangeEvent<{ name?: string; value: unknown }>) => {
    const { value } = event.target;
    setSelectedCamping(parseInt(value as string));
  };

  const handleRainChange = (event: React.ChangeEvent<{ name?: string; value: unknown }>) => {
    const { value } = event.target;
    setSelectedRain(parseInt(value as string));
  };

  const handleSearch = () => {
    setFormState((prevState) => ({ ...prevState, camping: selectedCamping , rain: selectedRain}));
    console.log(formState);
  };

  return (
    <>
    <div
          style={{
              paddingLeft: '5%',
              paddingRight: '5%',
              maxWidth: '500px',
              minHeight: '200px',
          }}
      >
        <ThemeProvider theme={theme}>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <TextField
              variant="outlined" fullWidth
              label="Trip Length"
              type="number"
              value={formState.tripLength}
              placeholder="Enter in number of days"
              onChange={handleTripLengthChange}
              name="tripLength"
              style={{ marginBottom: '1rem', border:'#000000'}}
            />
            <TextField
              label="Minimum Trip Temperature"
              type="number"
              placeholder="Enter in Celcius degree"
              variant="outlined" fullWidth
              value={formState.minimumTripTemperature}
              onChange={handleMinimumTripTemperatureChange}
              name="tripLength"
              style={{ marginBottom: '1rem' }}
            />
            <FormControl margin="normal">
              <InputLabel>Camping</InputLabel>
              <Select
                value={selectedCamping}
                onChange={handleCampingChange}
                variant="outlined"
                name="camping"
                style={{ marginBottom: '0rem' }}
                inputProps={{
                  style: { color: 'black', border: '1px solid black' },
                }}
              >
                <MenuItem value={1}>Yes- I will camp during the route.</MenuItem>
                <MenuItem value={0}>No - I will not camp during the route.</MenuItem>
              </Select>
            </FormControl>
            <FormControl margin="normal">
              <InputLabel>Rain</InputLabel>
              <Select
                value={selectedRain}
                onChange={handleRainChange}
                variant="outlined"
                name="rain"
                style={{ marginBottom: '0rem' }}
                inputProps={{
                  style: { color: 'black', border: '1px solid black' },
                }}
              >
                <MenuItem value={1}>Yes- It will rain on the route.</MenuItem>
                <MenuItem value={0}>No - It will not rain on the route.</MenuItem>
              </Select>
            </FormControl>
            <Button variant="contained"
                            style={{ backgroundColor: 'gray', color: 'black', maxWidth: '200px' }} onClick={handleSearch}>
              Search
            </Button>
          </div>
        </ThemeProvider>
    </div>
    </>
  );
};

export default Form;

[Atohallan]

As I mentioned in the comment, you need to import the components whatever you want from @mui/material as it is v6, and @material-ui/core is v5 which you have imported.

You can also refer to their live demo example as they have mentioned in their official documentation.

Or I shared a small snippet for demonstration. you can also go around with it. Only you need to replace #000000 with black for theming the TextField by importing styled from @mui/material in the below code:

  '& label.Mui-focused': {
    color: 'black',
  },
  '& .MuiInput-underline:after': {
    borderBottomColor: 'black',
  },
  '& .MuiOutlinedInput-root': {
    '& fieldset': {
      borderColor: 'black',
    },
    '&:hover fieldset': {
      borderColor: 'black',
    },
    '&.Mui-focused fieldset': {
      borderColor: 'black',
    },
  },```