About Computer

import Autocomplete from "@mui/material/Autocomplete";
import { styled } from "@mui/material/styles";

const StyledAutocomplete = styled(Autocomplete)({
  "& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
    // Default transform is "translate(14px, 20px) scale(1)""
    // This lines up the label with the initial cursor position in the input
    // after changing its padding-left.
    transform: "translate(34px, 20px) scale(1);"
  },
  "&.Mui-focused .MuiInputLabel-outlined": {
    color: "purple"
  },
  "& .MuiAutocomplete-inputRoot": {
    color: "purple",
    // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
    '&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type': {
      // Default left padding is 6px
      paddingLeft: 26
    },
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&:hover .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "purple"
    }
  }
});

export default function ComboBox() {
  return (
    <StyledAutocomplete />
  );
}

참고 사이트

https://stackoverflow.com/questions/58984406/setting-text-color-outline-and-padding-on-material-ui-autocomplete-component

1. IconButton

Code:

const iconButtonSides = 40;

//JSX
<IconButton
  sx={{
    width: iconButtonSides,
    height: iconButtonSides,
    borderRadius: 0,
    border: "1px solid",
    borderColor: "primary.main"
  }}

  aria-label="save"
>
  <Save sx={{ color: "primary.main" }} />
</IconButton>

Result: 

2. Button

Code:

const buttonSides = 64;

//JSX
<Button
  aria-label="save"
  variant="contained"
  sx={{
    width: buttonSides,
    height: buttonSides,

    borderRadius: 0,
    border: "1px solid",
    borderColor: "primary.main",
    "& .MuiButton-startIcon": { margin: 0 }
  }}
  startIcon={<Save />}
></Button>

Result:

참고 사이트

https://smartdevpreneur.com/how-to-make-square-buttons-and-iconbuttons-in-mui/

border를 지우고 싶은 Row에서 다음 코드 추가

sx={{ "& td": { border: 0 } }}

참고 사이트

https://stackoverflow.com/questions/57325232/how-to-remove-lines-between-cells-in-mui-table