覆盖用户界面选择

Question

我必须自定义选择组件以适合设计并最终像这样，考虑到我正在访问嵌套元素，有没有更好的方法来自定义它？

export const MuiFormControl = styled(FormControl)`
  flex-direction: ${
  props => props.variant === 'outlined' ? "row" : "column"
  }

  .MuiSelect-outlined {
    font-size: .8rem;
  }

  .MuiInputLabel-outlined {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    top: 0;
    transform: none;
    font-size: .8rem;
    color: #333;
    margin-right: 10px;
    top: 9px;  
    transform: none;
  }

  .MuiOutlinedInput-input {
    padding: 5px 32px 5px 10px;
  }
`;