Как изменить цвет рамки и текста TextField не в фокусе?

Question

[r1mple]

Как мне изменить цвет рамки и цвет текста TextField из муи, когда этот инпут не в фокусе?
Я пробовал и стилизованными компонентами, и makeStyles, да и просто cssом, но ничего не получилось.

import {
  Button,
  TextField,
  ThemeProvider
} from '@mui/material';
import React, {ChangeEvent, useState} from 'react';
import SearchIcon from '@mui/icons-material/Search';
import SearchTheme from '../../themes/searchTheme';

const SearchBox = (): JSX.Element => {
  const [label, setLabel] = useState<string>('Search for projects...');
  const [value, setValue] = useState<string>('');

  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event: ChangeEvent<HTMLInputElement>): void => {
    setValue(event.target.value);
    setLabel('Search for projects...');
  };

  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event): void => {
    if (value === "") {
      setLabel('No projects found.');
      return
    }
    console.log(`fetching request by projects... ${value}`);
  };

  return (
    <ThemeProvider theme={SearchTheme}>
      <div className="search" style={{ display: "flex" }}>
        <TextField
          id="outlined-helperText"
          label={label}
          variant="outlined"
          onChange={handleChange}
          color='primary'
          size='small'
          style={{marginRight: 6}}
        />
        <Button
          onClick={handleClick}
          variant="outlined"
          color="primary"
          endIcon={<SearchIcon/>}
        >
          Search
        </Button>
      </div>
    </ThemeProvider>
  );
};

export default SearchBox;

import { createTheme } from '@mui/material';
import {
    grey
} from '@mui/material/colors';


const SearchTheme = createTheme({
    palette: {
        primary: {
            main: grey.A100,
        }
    },
});

export default SearchTheme;

Получилось изменить только цвет при клике на этот инпут.