样式动态生成的按钮

Question

我正在尝试设置动态生成的按钮的样式。我创建了一个动态生成按钮的组件。

const TIMER_PRESETS: Record<string, number> = {
  FIFTHTEENSEC: 15,
  THIRTYSEC: 30,
  FORTYFIVESEC: 45,
  TWOMIN: 120,
  THREEMIN: 180,
  FOURMIN: 240,
};

const TimerPresetsWrapper = styled("div")`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  .button {
    background: white;
    width: 56px;
    height: 42px;
    border: 2px solid #bbbbb;
    color: #fffff;
    box-sizing: border-box;
    border-radius: 12px;

    :&hover  {
      background: ${HOVER_COLORS.LIGHT_GRAY};
    }
  }
`;

export default function TimerPresets(props: {
  onClick: (e: number) => void;
  style?: Record<string, string>;
}): React.ReactElement {
  return (
    <TimerPresetsWrapper>
      {Object.values(TIMER_PRESETS).map((preset: number, index: number) => {
        return (
          <div>
            <Button onClick={() => props.onClick(preset)} className="button">
              <Typography>{getDisplayableTime(preset)}</Typography>
            </Button>
          </div>
        );
      })}
    </TimerPresetsWrapper>
  );
}

这会生成我正在寻找的不同预设。问题是当我按模型调用它时，它是这样显示的

我曾尝试将它放入我的主要组件中的堆栈中，但不幸的是这里是主要组件代码。

  function renderTargetTimeWindow() {
    return (
      <Modal
        open={showTargetTimeWindow}
        onClose={hideTargetTimeWindow}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
        <div className={recorderClasses.targetTimeWindow}>
          <CloseIcon
            onClick={hideTargetTimeWindow}
            className={recorderClasses.windowCloseButton}
          />

          <Typography className={recorderClasses.targetTimeWindowTitle}>
            Specify the your recording Time
          </Typography>
          
          <Typography className={recorderClasses.targetTimeSelectionUnit}>
            minutes
          </Typography> */}
          <Stack
            spacing={4}
            direction="column"
            alignItems="center"
            height="100%"
          >
            <div className="justify-content-center">
              <TimerPresets
                style={{ right: "16px", top: "164px" }}
                onClick={handlePrestButtonClicked}
              />
            </div>
          </Stack>

          {/* TODO: Add a seconds option */}
          <Button
            className={recorderClasses.targetTimeCancelButton}
            onClick={handleTargetTimeCancelButtonClicked}
          >
            <Typography
              className={recorderClasses.targetTimeCancelButtonTypography}
            >
              Cancel
            </Typography>
          </Button>
          <Button
            className={recorderClasses.targetTimeDoneButton}
            onClick={handleTargetTimeDoneButtonClicked}
          >
            <Typography
              className={recorderClasses.targetTimeDoneButtonTypography}
            >
              Done
            </Typography>
          </Button>
        </div>
      </Modal>

我想做的是将它设计成这样

Answer 1

尝试使用网格显示而不是 flex

重构代码：

const TimerPresetsWrapper = styled("div")`
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 50px;

  .button {
    background: white;
    width: 56px;
    height: 42px;
    border: 2px solid #bbbbb;
    color: #fffff;
    box-sizing: border-box;
    border-radius: 12px;

    :&hover  {
      background: ${HOVER_COLORS.LIGHT_GRAY};
    }
  }
`;

您也可以删除堆栈并只保留 div（将 flex 属性添加到 div 以使内容居中）

<div className="flex justify-content-center">
  <TimerPresets
    style={{ right: "16px", top: "164px" }}
    onClick={handlePrestButtonClicked}
  />
</div>

最后，add/adjust 组件中的填充以实现您提到的样式。希望对小弟有所帮助

样式动态生成的按钮

Style dynamically generated buttons

css

client-side

typescript

reactjs

material-ui