仅更改 xxl 屏幕的 maxWidth 反应表

发布于 2025-01-10 20:27:28 字数 1024 浏览 0 评论 0原文

我正在使用反应表。在这个表中我有一列。在该列标题和列单元格中，我需要将 maxWidth 样式属性更改为 60（xs 到 xl）和 30（xxl）。有没有办法内联执行此操作？我只想在此 headerProps 和 cellProps 样式对象内进行更改，而不是创建单独的文件并将组件链接到它。我不是最擅长 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
            }
        },
    }
  ];

原文

I am using react-table. In this table I have a column. In that column header and column cell I need to change my maxWidth style property to be 60 for xs to xl and 30 for xxl. Is there a way to do this inline? I would like to only make changes inside this headerProps and cellProps style object rather than creating a seperate file and linking the component to it. Im not the best at scss this project is using scss.

Here is my accessor that has the cellProps and 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
            }
        },
    }
  ];

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三生路 2025-01-17 20:27:28

有一种方法，但它并不漂亮。 Javascript 无法使用 CSS 为我们提供的媒体查询，因此必须解决

在调整大小事件上设置事件侦听器。在回调函数上，使用计算出的窗口宽度设置一些状态值。然后将 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
            }
        },
    }
  ];

There is a way, but it's not pretty. Javascript can't use the media queries that CSS offers us, so it must be worked around

Set an event listener on the resize event. On the callback function, set some state value with the computed width of the window. Then set your maxwidth on the cellProps to be this state.

Something like this:

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
            }
        },
    }
  ];

回复收藏 0 原文

~没有更多了~