Question

我正在使用React和MaterialUI构建一个将在另一个（不是基于React的）网站内显示小部件的系统。我想让小部件响应，但是它们需要响应自己的容器宽度而不是窗口宽度，因为我不知道小部件将占用多少页面。

我考虑过的选项：

定期轮询容器大小</ li>
在窗口调整大小事件上轮询容器大小</ li>
在启动时根据容器和窗口大小设置主题断点

这些对我来说似乎都是非常丑陋的解决方案。有一种优雅的方式来做我想做的事吗？

Answer 1

要使各种@material-ui/core元素只占用放置容器所占用的空间，我将使用Grid组件。

我使用了以下内容：

<Grid container spacing={24}>
  <Grid item>
    Your content here
  </Grid>
</Grid>

如果您进一步希望网格项目对屏幕尺寸等做出响应，则可以执行以下操作：

const grid = {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 12,
    xl: 12,
};

和

<Grid item {...grid}>

文档：https://material-ui.com/layout/grid/

Answer 2

您可以侦听组件大小的变化，而不是断点。您可以使用react-use钩子useMeasure来实现这一点（它依赖于所有主流浏览器都支持的ResizeObserver），如以下示例所示：

/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import { faAddressBook, faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useMeasure } from 'react-use';

const useMyComponentStyle = (params) => {
    const { color } = params;
    const [ref, { width }] = useMeasure();

    const borderColor = width < 150 ? 'red' : width < 400 ? 'yellow' : 'green';
    const icon = width < 250 ? faCoffee : faAddressBook;

    const style = css`
        color: ${color};
        padding: 10px;
        border: 1px solid ${borderColor};
    `;

    return {
        ref,
        style,
        icon,
        width,
    };
};

export const MyComponent = (props) => {
    const { ref, style, icon, width } = useMyComponentStyle(props);

    return (
        <div ref={ref} css={style}>
            <FontAwesomeIcon icon={icon} />
            {props.children} [[{parseInt('' + width)}px]]
        </div>
    );
};

const containerStyle = css`
    padding: 100px 200px;
    border: 1px solid blue;
`;

export const MyContainer = () => (
    <div css={containerStyle}>
        <MyComponent color='blue'></MyComponent>
    </div>
);

ReactDOM.render(<MyContainer />, document.getElementById('root'));

上面的示例将emotion用于css样式，但是可以使用其他库（例如jss或styled components，甚至是简单的反应内联样式）来定义样式。

组件MyComponent包含在容器组件MyContainer中，容器组件padding的左侧和右侧的值为200px，您可以在调整浏览器视图大小时看到以下内容： border的{{1}}颜色基于组件本身的大小（{MyComponent，如果组件的宽度小于red， 150px（如果小于yellow，则为400px），而不取决于窗口的大小。

基于元素大小的材质UI响应

2 个答案: