React.js 呈现不同的标题栏

Question

我有一个 React 组件问题。

在 React 应用程序中，我想为移动设备显示不同的标题栏，为笔记本电脑或台式机显示另一个标题。我正在使用 material-ui 标头。我已经创建了两个单独的标头组件，那么我该如何配置 它们在 App.jsx 主中显示一个用于移动设备的标题，当用户在笔记本电脑上时显示另一个标题？

const headerLaptop =() ={
return (
<div>header element</div>
);
};

const headerMobile =() ={
return (
<div>header element</div>
);
};

const App =() ={
return (
<div>headerMobile or headerLaptop</div>
);
};

Answer 1

如果你使用的是material-ui，你可以使用withWidthsee doc and example here