Reactjs 增加物料-物料界面（自定义组件）的最小宽度

我已经建立的组件

 // libs
import React from 'react';

// material components
// styles
import {
  StyledSelect,
  StyledFormControl,
  StyledMenuList,
  ISelectProps,
} from './styles';

function Select(props: ISelectProps) {
  const {
    displayEmpty,
    iconBordered,
    options,
    value,
    children,
    onChange,
    className,
  } = props;
  return (
    <StyledFormControl className={className}>
      <StyledSelect
        MenuProps={{
          classes: { paper: 'Menupaper' },
          anchorOrigin: {
            vertical: 'bottom',
            horizontal: 'left',
          },
          getContentAnchorEl: null,
        }}
        IconComponent={(props) => {
          let iconClass = 'icon-container';
          if (props.className.split(' ').indexOf('MuiSelect-iconOpen') > -1) {
            iconClass += ' icon-rotate';
          }
          iconClass += ` ${props.className}`;
          return (
            <>
              <span className="icon-border" />
              <span className={iconClass}>
                <i className="icon-arrow-down icon-rotate" />
              </span>
            </>
          );
        }}
        autoWidth
        iconBordered={iconBordered}
        displayEmpty={displayEmpty}
        onChange={onChange}
        variant="outlined"
        value={value}
      >
        {!!options
          ? options.map(({ value, label }) => (
              <StyledMenuList disableRipple value={value}>
                {label}
              </StyledMenuList>
            ))
          : children}
      </StyledSelect>
    </StyledFormControl>
  );
}

export default Select;

我希望我的最小宽度可以从调用组件的位置更改

const FormField = styled.div`
  display: flex;
  margin-top: 18px;
  margin-bottom: ${({ theme }) => theme.spacing[400]};
  width: 100%;
  .searchSelect {
    width: 100%;
    margin-top: 7px;
    height: ${({ theme }) => theme.spacing[700]};
    .MuiOutlinedInput-root {
      height: ${({ theme }) => theme.spacing[700]};
    }
    .icon-container {
      top: 22px;
    }

    li {
      min-width: 192px;
    }
  }
`;

除了LI192PX之外，所有css更改都将生效。有人能帮忙吗？ 我曾尝试通过菜单类css等，但没有任何效果

编辑：

我也尝试过：

     <StyledMenuList
            classes={{ root: menuClass }}
            disableRipple
            value={value}
          >
            {label}
          </StyledMenuList>

{label}

---

通过道具传递menuClass时，如果没有代码沙盒，会有点困难，提供一个会有很大帮助

根据material ui

Select

的工作方式，我的建议是，您的

li MenuItems

与

.searchSelect

元素的DOM级别不同，这就是您的样式设置未得到应用的原因

试着把它放在外面——像这样：

    const FormField = styled.div`
      ...
      .searchSelect {
        width: 100%;
        margin-top: 7px;
        height: ${({ theme }) => theme.spacing[700]};
        .MuiOutlinedInput-root {
          height: ${({ theme }) => theme.spacing[700]};
        }
        .icon-container {
          top: 22px;
        }
      }
      
      li {
          min-width: 192px;
        }
    `;

---

我尝试过这个，但它不起作用设置未应用或被其他内容覆盖？未应用..好，这就引出了我的下一个建议-您是否尝试删除

Select

组件中的

MenuProps

道具，以查看

FormField

的样式是否会起作用。我尝试过删除道具，但它仍然不起作用。我想我可能需要使用children组件来重新设计整个组件

     <StyledMenuList
            classes={{ root: menuClass }}
            disableRipple
            value={value}
          >
            {label}
          </StyledMenuList>

    const FormField = styled.div`
      ...
      .searchSelect {
        width: 100%;
        margin-top: 7px;
        height: ${({ theme }) => theme.spacing[700]};
        .MuiOutlinedInput-root {
          height: ${({ theme }) => theme.spacing[700]};
        }
        .icon-container {
          top: 22px;
        }
      }
      
      li {
          min-width: 192px;
        }
    `;