页眉
);导出默认表头；要使用样式化的jsx，需要添加stylejsx标记作为要修改的jsx模板元素的同级或子级。Header的模板只有一个元素，因此，添加样式jsx标记作为同级最有意义。另一种方法是，可以渲染组件数组或使用React片段。CSS规则写在一个模板字符串中，该字符串放置在stylejsx标记中。编写规则的方式与在常规CSS文件中编写规则的方式相同，只要保持一致，并以分号结尾。例如，使用模板字符串编写CSS规则的缺点是，您将失去IDE和代码编辑器的帮助来编写它们。关于React开发人员是否应该在JS中使用CSS，这是一个坦率的争论。文章"JS中CSS有什么问题？"Brad Frost和Matija Marohnić的"桥接CSS和JavaScript之间的差距：JS中的CSS"可以帮助您形成自己对该主题的看法。创造了下一个.js建议在JS中使用CSS，以避免传统的基于CSS文件的样式设计带来的实际问题，尤其是与React的服务器端呈现相关的问题。作为练习，将导航栏和布局组件转换为使用样式jsx。完成后，回来比较结果：//组件/导航栏.js常量导航栏=（）=>(导航栏
);导出默认导航栏；//组件/布局.js从"next/Head"导入Head；从"./Header"导入头；从"./NavBar"导入NavBar；const Layout=道具=>({儿童道具}
);导出默认布局；你好吗？注意，您可以在样式jsx模板字符串中使用为每个模板标记指定的类。这使得为更复杂的组件设计样式变得更容易、更自然。忘记将逗号改为分号会破坏整个样式。但是，在layout组件中定义的灵活布局有一个问题：.Content容器不能伸展以填充Header和NavBar组件留下的空间。为了使.Content容器强制其flex:1样式属性，它需要有一个用于调整大小的参考框架，该参考框架来自于包含它的元素，在本例中是.Layout容器。.Layout容器的高度指定为100%；但是，此容器没有填充视口的全高。反过来，这只可能意味着它的封闭容器的高度不是100%。使用浏览器开发工具检查索引页的结构会发现，应用程序的顶层容器是一个ID为\uuNext的div元素。该元素没有高度或宽度；因此，其子元素没有高度值可继承，也没有用于动态调整大小的引用。要解决此问题，您需要为##uNext容器指定100%的高度和宽度，但有一个警告：pages子目录中的任何内容都代表前端应用程序的一个网页。下一个.js希望你认为这些网页是完整的和自给自足的。这意味着每个页面都知道如何独立于任何其他页面正确地呈现其内容。解决这个布局问题的方法是告诉应用程序中的每个页面如何呈现html、body和#2; next元素。最好的方法是在布局组件模板的现有样式jsx标记中定义全局样式。打开并更新布局.js下面的代码定义了索引.css标准create react app应用程序的文件：//组件/布局.js从"next/Head"导入Head；从"./Header"导入头；从"./NavBar"导入NavBar；const Layout=道具=>(
本文地址： /ziyuan/8279.html
版权声明：本文发布于收集站云 内容均来源于互联网 如有侵权联系删除
