Css React month picker的样式问题

我使用React创建了一个月范围选择器，我有一些样式问题。按钮尺寸太大，增加了popover的尺寸

这是我的代码：

import React, { FunctionComponent, useEffect, useReducer } from "react";
import {
  Button,
  Popover,
  Intent,
  Position,
  Tag,
  Icon
} from "@blueprintjs/core";
import { Row, Col } from "react-bootstrap";
import { IconNames } from "@blueprintjs/icons";

const monthNames = [
  "",
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec"
];

const MonthSelector = ({ month, year, onSelectYear, startYear, endYear }) => {
  const [state, setState] = useReducer(
    (state, newState) => ({
      ...state,
      ...newState
    }),
    {
      yearState: year,
      monthState: month
    }
  );

  useEffect(() => {
    onSelectYear({
      month: state.monthState,
      year: state.yearState
    });
  }, [state]);

  const styles = {
    yearNav: {
      display: "flex",
      alignItems: "center",
      margin: "0 1px 5px"
    },
    yearButton: {
      flex: "1",
      textAlign: "center",
      margin: "0 2px"
    },
    yearButtonText: {
      verticalAlign: "middle",
      fontWeight: "bold"
    },
    monthContainer: {
      display: "inline-block",
      padding: "1px",
      width: "33.33%",
      boxSizing: "border-box"
    },
    monthButton: {
      lineHeight: "3em",
      textAlign: "center",
      width: "100%"
    }
  };

  const onPrevYear = () => {
    setState({ yearState: state.yearState - 1 });
  };

  const onNextYear = () => {
    setState({ yearState: state.yearState + 1 });
  };

  const onSelect = (month) => {
    setState({ monthState: month });
  };

  const renderMonth = (monthItem) => {
    const selected = month === monthItem && year === state.yearState;

    return (
      <div style={styles.monthContainer} key={monthItem}>
        <Button
          intent={selected ? Intent.PRIMARY : Intent.NONE}
          style={styles.monthButton}
          onClick={() => onSelect(monthItem)}
        >
          {monthNames[monthItem]}
        </Button>
      </div>
    );
  };

  const months = [];
  for (let i = 1; i <= 12; i++) {
    months.push(renderMonth(i));
  }

  console.log("yearState", state.yearState);
  console.log("startYear.year", startYear.year);

  return (
    <div>
      <div style={styles.yearNav}>
        <Button
          small
          onClick={onPrevYear}
          icon={IconNames.CHEVRON_LEFT}
          minimal
          disabled={state.yearState <= startYear.year}
        />
        <div style={styles.yearButton}>
          <span style={styles.yearButtonText} className="block-header">
            {state.yearState}
          </span>
        </div>
        <Button
          small
          onClick={onNextYear}
          icon={IconNames.CHEVRON_RIGHT}
          minimal
          disabled={state.yearState >= endYear.year}
        />
      </div>
      <div style={styles.months}>{months}</div>
    </div>
  );
};

const MonthRangePicker = ({ startYear, endYear, onChange }) => {
  const [state, setState] = useReducer(
    (state, newState) => ({
      ...state,
      ...newState
    }),
    {
      startState: startYear,
      endState: endYear
    }
  );

  useEffect(() => {
    onChange(state.startState, state.endState);
  }, [state]);

  const onSetStart = (startState) => {
    setState({ startState });
  };

  const onSetEnd = (endState) => {
    setState({ endState });
  };

  console.log("month picker state", state);

  return (
    <Popover
      position={Position.BOTTOM}
      fill
      content={
        <React.Fragment>
          <div className="text-center p-1">
            <Tag large>{`${monthNames[state.startState.month]}-${
              state.startState.year
            }`}</Tag>
            <Icon icon={IconNames.ARROW_RIGHT} iconSize={20} />
            <Tag large>{`${monthNames[state.endState.month]}-${
              state.endState.year
            }`}</Tag>
          </div>
          <Row className="container-fluid">
            <Col className="form-group" md={6}>
              <MonthSelector
                month={state.startState.month}
                year={state.startState.year}
                onSelectYear={onSetStart}
                startYear={startYear}
                endYear={endYear}
              />
            </Col>
            <Col className="form-group" md={6}>
              <MonthSelector
                month={state.endState.month}
                year={state.endState.year}
                onSelectYear={onSetEnd}
                startYear={startYear}
                endYear={endYear}
              />
            </Col>
          </Row>
        </React.Fragment>
      }
    >
      <div className="d-flex justify-content-center">
        <Button
          className="text-center"
          intent={Intent.PRIMARY}
          text="Open Month Range Picker"
        />
      </div>
    </Popover>
  );
};

export default MonthRangePicker;

import React，{FunctionComponent，useffect，useReducer}来自“React”；
进口{
按钮
爆米花，
意图
立场,，
标签，
偶像
}来自“@blueprintjs/core”；
从“react bootstrap”导入{Row，Col}；
从“@blueprintjs/icons”导入{IconNames}；
康斯特·蒙纳姆斯=[
"",
“简”，
“二月”，
“三月”，
“四月”，
“五月”，
“六月”，
“七月”，
“八月”，
“九月”，
“十月”，
“11月”，
“十二月”
];
const MonthSelector=（{month，year，onSelectYear，startYear，endYear}）=>{
const[state，setState]=useReducer(
（州，新闻州）=>({
……国家，
…新闻状态
}),
{
国家：年，
月州：月
}
);
useffect（（）=>{
选举年({
月份：state.monthState，
年份：state.yearState
});
}，[州]；
常量样式={
AV:{
显示：“flex”，
对齐项目：“中心”，
边距：“0 1px 5px”
},
年份按钮：{
弹性体：“1”，
textAlign：“居中”，
边距：“0 2px”
},
yearButtonText：{
垂直排列：“中间”，
fontWeight：“粗体”
},
monthContainer：{
显示：“内联块”，
填充：“1px”，
宽度：“33.33%”，
框大小：“边框框”
},
蒙特伯顿：{
线宽：“3em”，
textAlign：“居中”，
宽度：“100%”
}
};
const onPrevYear=（）=>{
setState（{yearState:state.yearState-1}）；
};
const onNextYear=（）=>{
setState（{yearState:state.yearState+1}）；
};
const onSelect=（月）=>{
setState（{monthState:month}）；
};
常数renderMonth=（monthItem）=>{
所选常量=月===月和年===state.yearState；
返回(
onSelect（monthItem）}
>
{monthNames[monthItem]}
);
};
常量月数=[]；
for（设i=1；i{
const[state，setState]=useReducer(
（州，新闻州）=>({
……国家，
…新闻状态
}),
{
startState:startYear，
结束状态：结束年
}
);
useffect（（）=>{
onChange（state.startState、state.endState）；
}，[州]；
const onSetStart=（startState）=>{
setState（{startState}）；
};
const onSetEnd=（endState）=>{
setState（{endState}）；
};
日志（“月份选择器状态”，状态）；
返回(
);
};
导出默认MonthRangePicker；

原始输出：

预期输出：与

我希望按钮按预期输出关闭，这样popover的宽度就不会太大。请给出建议

这是我的密码：

import React, { FunctionComponent, useEffect, useReducer } from "react";
import {
  Button,
  Popover,
  Intent,
  Position,
  Tag,
  Icon
} from "@blueprintjs/core";
import { Row, Col } from "react-bootstrap";
import { IconNames } from "@blueprintjs/icons";

const monthNames = [
  "",
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec"
];

const MonthSelector = ({ month, year, onSelectYear, startYear, endYear }) => {
  const [state, setState] = useReducer(
    (state, newState) => ({
      ...state,
      ...newState
    }),
    {
      yearState: year,
      monthState: month
    }
  );

  useEffect(() => {
    onSelectYear({
      month: state.monthState,
      year: state.yearState
    });
  }, [state]);

  const styles = {
    yearNav: {
      display: "flex",
      alignItems: "center",
      margin: "0 1px 5px"
    },
    yearButton: {
      flex: "1",
      textAlign: "center",
      margin: "0 2px"
    },
    yearButtonText: {
      verticalAlign: "middle",
      fontWeight: "bold"
    },
    monthContainer: {
      display: "inline-block",
      padding: "1px",
      width: "33.33%",
      boxSizing: "border-box"
    },
    monthButton: {
      lineHeight: "3em",
      textAlign: "center",
      width: "100%"
    }
  };

  const onPrevYear = () => {
    setState({ yearState: state.yearState - 1 });
  };

  const onNextYear = () => {
    setState({ yearState: state.yearState + 1 });
  };

  const onSelect = (month) => {
    setState({ monthState: month });
  };

  const renderMonth = (monthItem) => {
    const selected = month === monthItem && year === state.yearState;

    return (
      <div style={styles.monthContainer} key={monthItem}>
        <Button
          intent={selected ? Intent.PRIMARY : Intent.NONE}
          style={styles.monthButton}
          onClick={() => onSelect(monthItem)}
        >
          {monthNames[monthItem]}
        </Button>
      </div>
    );
  };

  const months = [];
  for (let i = 1; i <= 12; i++) {
    months.push(renderMonth(i));
  }

  console.log("yearState", state.yearState);
  console.log("startYear.year", startYear.year);

  return (
    <div>
      <div style={styles.yearNav}>
        <Button
          small
          onClick={onPrevYear}
          icon={IconNames.CHEVRON_LEFT}
          minimal
          disabled={state.yearState <= startYear.year}
        />
        <div style={styles.yearButton}>
          <span style={styles.yearButtonText} className="block-header">
            {state.yearState}
          </span>
        </div>
        <Button
          small
          onClick={onNextYear}
          icon={IconNames.CHEVRON_RIGHT}
          minimal
          disabled={state.yearState >= endYear.year}
        />
      </div>
      <div style={styles.months}>{months}</div>
    </div>
  );
};

const MonthRangePicker = ({ startYear, endYear, onChange }) => {
  const [state, setState] = useReducer(
    (state, newState) => ({
      ...state,
      ...newState
    }),
    {
      startState: startYear,
      endState: endYear
    }
  );

  useEffect(() => {
    onChange(state.startState, state.endState);
  }, [state]);

  const onSetStart = (startState) => {
    setState({ startState });
  };

  const onSetEnd = (endState) => {
    setState({ endState });
  };

  console.log("month picker state", state);

  return (
    <Popover
      position={Position.BOTTOM}
      fill
      content={
        <React.Fragment>
          <div className="text-center p-1">
            <Tag large>{`${monthNames[state.startState.month]}-${
              state.startState.year
            }`}</Tag>
            <Icon icon={IconNames.ARROW_RIGHT} iconSize={20} />
            <Tag large>{`${monthNames[state.endState.month]}-${
              state.endState.year
            }`}</Tag>
          </div>
          <Row className="container-fluid">
            <Col className="form-group" md={6}>
              <MonthSelector
                month={state.startState.month}
                year={state.startState.year}
                onSelectYear={onSetStart}
                startYear={startYear}
                endYear={endYear}
              />
            </Col>
            <Col className="form-group" md={6}>
              <MonthSelector
                month={state.endState.month}
                year={state.endState.year}
                onSelectYear={onSetEnd}
                startYear={startYear}
                endYear={endYear}
              />
            </Col>
          </Row>
        </React.Fragment>
      }
    >
      <div className="d-flex justify-content-center">
        <Button
          className="text-center"
          intent={Intent.PRIMARY}
          text="Open Month Range Picker"
        />
      </div>
    </Popover>
  );
};

export default MonthRangePicker;

---

我对代码做了一些更改：

将类分配给DreamAV并选择下一个元素对其进行样式设置。可能是因为我在代码中找不到monthContainer之前的div。将该元素作为列设置为3的内联网格容器

将按钮的

最小宽度增加到45px

删除了Row类并将其包装在容器流体中。这消除了您在注释中提到的不均匀填充

如果你想在手机上以更好的方式显示它，我已经加入了媒体查询，这样宽度就可以了

代码沙盒编辑器：

---

你在找这样的东西吗？不。我想要一个3x4的网格，用于几个月，但要以更简洁的方式，有紧密的按钮。谢谢还是这样吗？是的，可以。你能发布解决方案吗？月份是直线的。你能更新链接吗？我使用相同的链接获得屏幕截图。