Блог

Компонент, который я создал

  // 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;
 

Доступ к компоненту:

          <FormField>
          <Left>
            <Label>{t('search_pane.status')}</Label>
            <Select
              displayEmpty
              menuClass="menu"
              className="searchSelect"
              value={chatState}
              onChange={handleChatStatusChange}
              options={Object.keys(CHAT_STATE_OPTIONS).map((el) => {
                return { value: el, label: CHAT_STATE_OPTIONS[el] };
              })}
            />
          </Left>
          <Right>
            <Label>{t('search_pane.date')}</Label>
            <Select
              className="searchSelect"
              menuClass="menu"
              value={date}
              onChange={handleDateChange}
              options={Object.keys(DATE_OPTIONS).map((el) => {
                return { value: el, label: DATE_OPTIONS[el] };
              })}
            />
          </Right>
        </FormField>
 

Стиль меню:

   export const StyledMenuList = styled(MenuItem)`
  min-width: 125px;
  margin-left: 6px;
  margin-right: 6px;
  padding-left: 8px;
  font-size: ${({ theme }) => theme.font.sizes[500]};
  color: ${({ theme }) => theme.colors.SECONDARY[600]};
  transition: all 300ms ease;
  transition-property: background-color, color;

  amp;:focus {
    background-color: ${({ theme }) => theme.colors.WHITE};
  }

  amp;:hover {
    background-color: ${({ theme }) => theme.colors.PRIMARY[100]} !important;
    color: ${({ theme }) => theme.colors.PRIMARY[600]};
    border-radius: 4px;
  }
`;
 

Я хочу, чтобы моя минимальная ширина изменялась с того места, где я вызываю компонент

 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;
    }
  }
`;
 

Все изменения css вступают в силу, кроме размера 192px может кто-нибудь помочь?
Я пытался передать menuClass css и т. Д., Но ничего не сработало

Редактировать:

Я также пробовал:

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

передача menuClass через props

Без codesandbox это немного сложнее, но его предоставление было бы очень полезным.

Мое предположение, основанное на том, как работает material-ui Select , заключается в том, что вы li-MenuItems не находитесь на том же уровне DOM, .searchSelect что и элемент, который ожидает ваш стиль, и именно поэтому ваш стиль не применяется.

Попробуйте поместить его снаружи — что-то вроде этого:

     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;
        }
    `;