我正在做一個利用材質ui和React/ Redux的項目。figma文件最近進行了更改，將內置的SwipeableDrawer組件放在了屏幕的右側，而不是左側。無論我做什么，我都不知道如何改變位置。

這是組件的JSX

<SwipeableDrawer
      className="swipeDrawer"
      anchor="bottom"
      variant="temporary"
      open={isFilterShown}
      onOpen={toggleFilterModal}
      onClose={toggleFilterModal}
      sx={{
        '& .MuiDrawer-paper': {
          height: '50%'
        }
      }}
    >
      <Box
        className="filterBox"
        sx={{
          height: '14%',
          backgroundColor: '#525F75',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          paddingTop: '5%'
        }}
      >
        <Typography variant="h5" color="white">
          Water Filter
        </Typography>
      </Box>
      <Box className="filterGroup">
        <Typography className="filterFont">Features</Typography>
        <Grid container spacing={1}>
          <Grid item>
            <FilterButton
              active={openNow}
              filter={'Open Now'}
              action={{
                type: 'SET_TOGGLE_STATE',
                toggle: 'openNow',
                toggleState: !openNow
              }}
            />
          </Grid>
          <Grid item>
            <FilterButton
              active={handicap}
              filter={'ADA Accessible'}
              action={{
                type: 'SET_TOGGLE_STATE',
                toggle: 'handicap',
                toggleState: !handicap
              }}
            />
          </Grid>
          <Grid item>
            <FilterButton
              active={sparkling}
              filter={'Sparkling'}
              action={{
                type: 'SET_TOGGLE_STATE',
                toggle: 'sparkling',
                toggleState: !sparkling
              }}
            />
          </Grid>
        </Grid>
      </Box>
      <Box className="filterGroup">
        <Typography className="filterFont">Tap Type</Typography>
        <Grid container spacing={1}>
          <Grid item>
            <FilterButton
              active={fountain}
              filter={'Drinking Fountain'}
              action={{
                type: 'SET_TOGGLE_STATE',
                toggle: 'fountain',
                toggleState: !fountain
              }}
            />
          </Grid>
          <Grid item>
            <FilterButton active={soda} filter={'Soda Dispenser'} />
          </Grid>
          <Grid item>
            <FilterButton active={cooler} filter={'Water Cooler'} />
          </Grid>
          <Grid item>
            <FilterButton active={bottle} filter={'Bottle Filter'} />
          </Grid>
        </Grid>
      </Box>
      <Box className="filterGroup">
        <Grid Container>
          <Typography className="filterFont">Organization Type</Typography>
          <ButtonGroup aria-label="outlined button group">
            <FilterButton active={publicOrg} filter={'Public'} />
            <FilterButton active={privateOrg} filter={'Private'} />
            <FilterButton active={sharedOrg} filter={'Shared'} />
            <FilterButton active={restrictedOrg} filter={'Restricted'} />
          </ButtonGroup>
        </Grid>
        <Grid className="bottomButtons" Container>
          <Button onClick={clearAll} className=" clearButton" variant="text">
            Clear All
          </Button>
          <Button className=" applyButton" variant="outlined">
            Apply
          </Button>
        </Grid>
      </Box>
    </SwipeableDrawer>

這是我擁有的相關CSS類。很明顯，我不想使用左填充/右填充來實現這一點，因為那樣沒有響應性。

。filterBox {寬度:100%；右填充:0；}

我已經嘗試使用顯示塊/浮動左，但不起作用。老實說，我已經為此工作了一個多星期，嘗試了許多我記不起的東西，但我真的被卡住了。

編輯:請求最終結果HTML。

<div
  role="presentation"
  class="MuiModal-root MuiDrawer-root MuiDrawer-modal swipeDrawer css-1ggqt74-MuiModal-root-MuiDrawer-root"
>
  <div
    aria-hidden="true"
    class="MuiBackdrop-root css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
    style="
      opacity: 1;
      transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    "
  ></div>
  <div tabindex="0" data-test="sentinelStart"></div>
  <div
    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation16 MuiDrawer-paper MuiDrawer-paperAnchorBottom css-9emuhu-MuiPaper-root-MuiDrawer-paper"
    tabindex="-1"
    style="
      transform: none;
      transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    "
  >
    <div class="filterBox MuiBox-root css-od27r6">
      <h5
        class="MuiTypography-root MuiTypography-h5 css-1rtg20-MuiTypography-root"
      >
        Water Filter
      </h5>
    </div>
      <!-- ...  -->
    </div>
  </div>
  <div tabindex="0" data-test="sentinelEnd"></div>
</div>

您只需要更改組件中可用的錨點屬性，所有抽屜屬性都是從SwipeableDrawer繼承的:

<SwipeableDrawer
  anchor={'left'} // 'right', 'bottom', 'top'
  ...other props
>
  Your content here
</SwipeableDrawer>

絕對沒有理由為SwipeableDrawer的外觀位置使用定制樣式

抽屜演示:https://mui.com/material-ui/react-drawer/ swipe able drawer API:https://mui.com/material-ui/api/swipeable-drawer/