Material-UI OutlinedInput의 테두리 색상 변경 문제 해결하기

제목: Material-UI OutlinedInput의 테두리 색상 변경 문제 해결하기

Material-UI OutlinedInput 컴포넌트의 테두리 색상을 변경하는 데 어려움을 겪고 계신가요? 오늘은 이 문제를 해결하는 방법을 알아보고 기본 CSS를 덮어쓰고 테두리 색상을 사용자화하는 다양한 접근 방식을 탐색해보겠습니다.

createStyles()를 사용하여 CSS 재정의하기

Material-UI v4.13에서 select 및 OutlinedInput 요소에 CSS 규칙을 적용하여 테두리 색상을 변경하려고 시도한 적이 있을 수 있습니다. 그러나 원하는 결과를 얻는 데 어려움을 겪었을 겁니다.

<span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=</span> <span class="token punctuation">></span>
  createStyles(<span class="token punctuation">{</span>
    select: <span class="token punctuation">{</span>
      <span class="token string">"&:before"</span>: <span class="token punctuation">{</span>
        borderColor: <span class="token string">"red"</span>
      <span class="token punctuation">}</span>,
      <span class="token string">"&:after"</span>: <span class="token punctuation">{</span>
        borderColor: <span class="token string">"red"</span>
      <span class="token punctuation">}</span>,
    <span class="token punctuation">}</span>,
    outline: <span class="token punctuation">{</span>
      <span class="token string">"&:before"</span>: <span class="token punctuation">{</span>
        borderColor: <span class="token string">"red"</span>
      <span class="token punctuation">}</span>,
      <span class="token string">"&:after"</span>: <span class="token punctuation">{</span>
        borderColor: <span class="token string">"red"</span>
      <span class="token punctuation">}</span>,
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>);

<span class="token comment">// Select 컴포넌트</span>
<Select
  label={label}
  fullWidth={true}
  error={touched <span class="token operator">&&</span> invalid}
  className={inputStyles}
  classes={<span class="token punctuation">{</span> root<span class="token operator">:</span> classes.select <span class="token punctuation">}</span>}
  input={

    { notchedOutline<span class="token operator">:</span> classes.outline <span class="token punctuation">}</span>}
    />
  
}
  {...custom}
>
  {children}
</Select>

테두리 색상이 설정되는 위치를 확인할 수 있지만 의도한 대로 덮어쓰지 못하는 상황이 있을 수 있습니다.

Material-UI v4에서 사용자 지정 스타일 적용하기

v4에서 Material-UI OutlinedInput 컴포넌트의 테두리 색상을 변경하려면 대안적인 방법을 시도해볼 수 있습니다. 아래는 예시 구현입니다:

<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> makeStyles <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@material-ui/core/styles"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> OutlinedInput <span class="token keyword">from</span> <span class="token string">"@material-ui/core/OutlinedInput"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> InputLabel <span class="token keyword">from</span> <span class="token string">"@material-ui/core/InputLabel"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> MenuItem <span class="token keyword">from</span> <span class="token string">"@material-ui/core/MenuItem"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> FormControl <span class="token keyword">from</span> <span class="token string">"@material-ui/core/FormControl"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Select <span class="token keyword">from</span> <span class="token string">"@material-ui/core/Select"</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> useStyles <span class="token operator">=</span> makeStyles(theme <span class="token operator">=</span> <span class="token punctuation">{</span>
  root<span class="token operator">:</span> <span class="token punctuation">{</span>
    display<span class="token operator">:</span> <span class="token string">"flex"</span><span class="token punctuation">;</span>
    flexWrap<span class="token operator">:</span> <span class="token string">"wrap"</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  formControl<span class="token operator">:</span> <span class="token punctuation">{</span>
    margin<span class="token operator">:</span> theme.spacing(<span class="token number">1</span>)<span class="token punctuation">;</span>
    minWidth<span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  selectEmpty<span class="token operator">:</span> <span class="token punctuation">{</span>
    marginTop<span class="token operator">:</span> theme.spacing(<span class="token number">2</span>)<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> useOutlinedInputStyles <span class="token operator">=</span> makeStyles(theme <span class="token operator">=</span> <span class="token punctuation">{</span>
  root<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">"& $notchedOutline"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
      borderColor<span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string">"&:hover $notchedOutline"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
      borderColor<span class="token operator">:</span> <span class="token string">"blue"</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string">"&$focused $notchedOutline"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
      borderColor<span class="token operator">:</span> <span class="token string">"green"</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  focused<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  notchedOutline<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">SimpleSelect</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> classes <span class="token operator">=</span> useStyles();
  <span class="token keyword">const</span> outlinedInputClasses <span class="token operator">=</span> useOutlinedInputStyles();
  <span class="token keyword">const</span> <span class="token punctuation">[</span>values<span class="token punctuation">,</span> setValues<span class="token punctuation">]</span> <span class="token operator">=</span> React.useState(<span class="token punctuation">{</span>
    age<span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>;

  <span class="token keyword">const</span> inputLabel <span class="token operator">=</span> React.useRef(null);
  <span class="token keyword">const</span> <span class="token punctuation">[</span>labelWidth<span class="token punctuation">,</span> setLabelWidth<span class="token punctuation">]</span> <span class="token operator">=</span> React.useState(<span class="token number">0</span>);
  React.useEffect(<span class="token operator">()</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
    setLabelWidth(inputLabel.current.offsetWidth);
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[]</span><span class="token punctuation">)</span>;

  <span class="token keyword">function</span> handleChange(event <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    setValues(oldValues <span class="token operator">=></span> <span class="token punctuation">{</span>
      <span class="token operator">...</span>oldValues<span class="token punctuation">,</span>
      <span class="token punctuation">[</span>event.target.name<span class="token punctuation">]</span><span class="token punctuation">:</span> event.target.value
    <span class="token punctuation">}</span><span class="token punctuation">)</span>;
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> (
    <span class="token tag">form</span> className<span class="token operator">=</span>{classes.root} autoComplete<span class="token operator">=</span><span class="token string">"off"</span><span class="token punctuation">;</span>
      <span class="token tag">FormControl</span> variant<span class="token operator">=</span><span class="token string">"outlined"</span> className<span class="token operator">=</span>{classes.formControl}<span class="token punctuation">;</span>
        <span class="token tag">InputLabel</span> ref<span class="token operator">=</span>{inputLabel} htmlFor<span class="token operator">=</span><span class="token string">"outlined-age-simple"</span><span class="token punctuation">;</span>
          나이
        <span class="token punctuation"><</span><span class="token operator">/</span><span class="token tag">InputLabel</span><span class="token punctuation">></span>
        <span class="token tag">Select</span>  value<span class="token operator">=</span>{values.age}  onChange<span class="token operator">=</span>{handleChange}<span class="token punctuation">;</span>
          <span class="token tag">OutlinedInput</span>  labelWidth<span class="token operator">=</span>{labelWidth}  name<span class="token operator">=</span><span class="token string">"age"</span> id<span class="token operator">=</span><span class="token string">"outlined-age-simple"</span>  classes<span class="token operator">=</span>{outlinedInputClasses}<span class="token punctuation">;</span>
        <span class="token tag">/OutlinedInput</span><span class="token punctuation">></span>
      <span class="token tag">/Select</span><span class="token punctuation">></span>
    <span class="token tag">/FormControl</span><span class="token punctuation">></span>
  <span class="token tag">/form</span><span class="token punctuation">></span>
  );
<span class="token punctuation">}</span>

이 예시를 따라하면 Material-UI v4의 OutlinedInput 컴포넌트의 기본 테두리 색상을 덮어쓸 수 있으며 원하는 사용자화를 구현할 수 있습니다.

styled 컴포넌트를 사용한 Material-UI v5 솔루션

Material-UI v5에서는 styled 컴포넌트 접근 방식을 사용하여 OutlinedInput 컴포넌트의 테두리 색상을 사용자화할 수 있습니다. 아래는 예시입니다:

<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> styled <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@material-ui/core/styles"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> InputLabel <span class="token keyword">from</span> <span class="token string">"@material-ui/core/InputLabel"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> MenuItem <span class="token keyword">from</span> <span class="token string">"@material-ui/core/MenuItem"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> FormControl <span class="token keyword">from</span> <span class="token string">"@material-ui/core/FormControl"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Select <span class="token keyword">from</span> <span class="token string">"@material-ui/core/Select"</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> StyledForm <span class="token operator">=</span> styled(<span class="token string">"form"</span>)(`
  display: flex;
  flex-wrap: wrap;
`);

<span class="token keyword">const</span> StyledFormControl <span class="token operator">=</span> styled(FormControl)((<span class="token punctuation">{</span> theme <span class="token punctuation">}</span>) <span class="token operator">=></span> <span class="token punctuation">{</span>
  margin<span class="token operator">:</span> theme.spacing(<span class="token number">1</span>)<span class="token punctuation">;</span>
  minWidth<span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>);

<span class="token keyword">const</span> StyledSelect <span class="token operator">=</span> styled(Select)(`
  & .MuiOutlinedInput-notchedOutline <span class="token punctuation">{</span>
    borderColor<span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  &:hover .MuiOutlinedInput-notchedOutline <span class="token punctuation">{</span>
    borderColor<span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  &.Mui-focused .MuiOutlinedInput-notchedOutline <span class="token punctuation">{</span>
    borderColor<span class="token punctuation">:</span> lime<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
`);

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">SimpleSelect</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>values<span class="token punctuation">,</span> setValues<span class="token punctuation">]</span> <span class="token operator">=</span> React.useState(<span class="token punctuation">{</span>
    age<span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>;

  <span class="token keyword">function</span> handleChange(event <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    setValues((oldValues) <span class="token operator">=></span> <span class="token punctuation">{</span>
      <span class="token operator">...</span>oldValues<span class="token punctuation">,</span>
      [event.target.name]<span class="token punctuation">:</span> event.target.value
    <span class="token punctuation">}</span><span class="token punctuation">)</span>;
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> (
    <span class="token tag">StyledForm</span> autoComplete<span class="token operator">=</span><span class="token string">"off"</span><span class="token punctuation">;</span>
      <span class="token tag">StyledFormControl</span> variant<span class="token operator">=</span><span class="token string">"outlined"</span><span class="token punctuation">;</span>
        <span class="token tag">InputLabel</span> id<span class="token operator">=</span><span class="token string">"outlined-age-simple-label"</span><span class="token punctuation">;</span>
          나이
        <span class="token punctuation"><</span><span class="token operator">/</span><span class="token tag">InputLabel</span><span class="token punctuation">></span>
        <span class="token tag">StyledSelect</span>
          labelId<span class="token operator">=</span><span class="token string">"outlined-age-simple-label"</span>
          value<span class="token operator">=</span>{values.age}
          onChange<span class="token operator">=</span>{handleChange}
          name<span class="token operator">=</span><span class="token string">"age"</span>
          label<span class="token operator">=</span><span class="token string">"Age"</span>
        <span class="token punctuation"><</span><span class="token operator">/</span><span class="token tag">StyledSelect</span><span class="token punctuation">></span>
      <span class="token punctuation"><</span><span class="token operator">/</span><span class="token tag">StyledFormControl</span><span class="token punctuation">></span>
    <span class="token punctuation"><</span><span class="token operator">/</span><span class="token tag">StyledForm</span><span class="token punctuation">></span>
  );
<span class="token punctuation">}</span>

이 구현을 통해 Material-UI v5에서 styled 컴포넌트를 활용하여 OutlinedInput 컴포넌트의 테두리 색상을 사용자화할 수 있습니다.

Material-UI v5에서 sx 속성 사용하기

Material-UI v5에서는 sx 속성을 사용하여 테두리 색상을 사용자화할 수도 있습니다. 아래는 참고용 예시입니다:

<span class="token tag">OutlinedInput</span>
  name<span class="token operator">=</span><span class="token string">"age"</span>
  onChange<span class="token operator">=</span>{handleChange}
  sx<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token string">"& .MuiOutlinedInput-notchedOutline"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
      borderColor<span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string">"&:hover > .MuiOutlinedInput-notchedOutline"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
      borderColor<span class="token operator">:</span> <span class="token string">"lime"</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
/<span class="token tag">OutlinedInput</span>

sx 속성을 사용하면 Material-UI v5에서 OutlinedInput 컴포넌트의 테두리 색상을 쉽게 수정할 수 있습니다.

결론

이 블로그 포스트에서는 Material-UI OutlinedInput 컴포넌트의 테두리 색상을 변경할 수 없는 문제를 해결하기 위해 다양한 접근 방식을 탐색하고 해결 방법을 살펴보았습니다. createStyles(), styled 컴포넌트 및 v5의 sx 속성을 활용한 Material-UI v4 및 v5의 솔루션에 대해 예시를 포함하여 다루었습니다.

이러한 방법을 활용하여 Material-UI OutlinedInput 컴포넌트의 테두리 색상을 맞춤화하여 원하는 디자인 요구 사항에 맞게 쉽게 사용자 지정할 수 있습니다. 이러한 솔루션을 실험하고 프로젝트의 특정 요구 사항을 충족시키기 위해 이러한 솔루션을 수정해보세요!

참고 자료 :

https://stackoverflow.com/questions/56958742/cant-change-border-color-of-material-ui-outlinedinput

같은 카테고리의 다른 글 보기 :

reactjs