仅为 xxl 屏幕更改 maxWidth react-table

Question

我正在使用 react-table。在这个 table 我有一个专栏。在该列 header 和列单元格中，我需要将我的 maxWidth 样式属性更改为 60（xs 到 xl）和 30（xxl）。有没有办法内联执行此操作？我只想在此 headerProps 和 cellProps 样式 object 中进行更改，而不是创建一个单独的文件并将组件链接到它。我不是最擅长 scss 这个项目正在使用 scss。

这是我的访问器，它有 cellProps 和 headerProps

  const columns = [
    
    {
        accessor: 'firstName',
        Header: 'First Name',
        Cell: firstNameFormatter
    },
    {
        accessor: 'lastName',
        Header: 'Last Name',
        Cell: lastNameFormatter
    },
    {
        accessor: 'actions',
        Header: <FontAwesomeIcon icon="cog" className="fs-1 ml-2" />,
        headerProps: {
            className: 'bg-light',
            style: {
                maxWidth: 60 <--- make this maxWidth 30 only for xxl screens
            }
        },
        Cell: actionFormatter,
        sticky: 'right',
        cellProps: {
            className: 'bg-light',
            style: {
            maxWidth: 60 <---- make this maxWidth 30 only for xxl screens
            }
        },
    }
  ];

Answer 1

有办法，但不太好。 Javascript 无法使用 CSS 提供给我们的媒体查询，因此必须解决

在调整大小事件上设置事件侦听器。在回调函数中，使用 window 的计算宽度设置一些状态值。然后将 cellProps 上的 maxwidth 设置为该状态。

像这样：

const [maxWidth, setMaxWidth] = useState(getWidth())

function getWidth() {
  const body = document.querySelector("body")
  const width = parseFloat(window.getComputedStyle(body).width)
  if (width > 1200) {
    return 30
  } else {
    return 60
  }
}

window.addEventListener("resize", () => setMaxWidth(getWidth()))

  const columns = [
    
    {
        accessor: 'firstName',
        Header: 'First Name',
        Cell: firstNameFormatter
    },
    {
        accessor: 'lastName',
        Header: 'Last Name',
        Cell: lastNameFormatter
    },
    {
        accessor: 'actions',
        Header: <FontAwesomeIcon icon="cog" className="fs-1 ml-2" />,
        headerProps: {
            className: 'bg-light',
            style: {
                maxWidth: maxWidth
            }
        },
        Cell: actionFormatter,
        sticky: 'right',
        cellProps: {
            className: 'bg-light',
            style: {
            maxWidth: maxWidth
            }
        },
    }
  ];

仅为 xxl 屏幕更改 maxWidth react-table

Change maxWidth only for xxl screens react-table

javascript

css

sass

reactjs