小编Put*_*San的帖子

.small-container { width: 200px; }
.small-container > div { margin: 16px; }
.border { box-shadow: 0 0 2px 2px black; }

.break-long-text {
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.grid-fr {
    display: grid;
    grid-template-columns: 1fr;
}

.grid-minmax {
    display: grid;
    grid-template-columns: minmax(120px, 1fr);
}

<div class="small-container">
  <div class="grid-fr">
    <div class="break-long-text border">
      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG
    </div>
  </div>
  <div class="grid-minmax">
    <div class="break-long-text border">
      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG
    </div>
  </div>
</div>

两个网格完全相同,唯一的区别是grid-template-columns价值.但是,一个网格尊重其父(200px)的宽度,另一个网格忽略宽度.

1. grid:grid-template-columns: 1fr;=>忽略父宽度并继续,直到内容被填充

2. grid:grid-template-columns: minmax(120px, 1fr);=>仅上升到parent-width(200px)然后变为必要的高度.但是,它仍然大于定义的min-width( …

我正在尝试使用ES6模块构建一个没有捆绑的新项目.我仍然想用babel-7将TypeScript和JSX翻译成JS.我发现很难弄清楚如何为它设置开发服务器.我找不到任何类似于webpack-dev-server(热模块重新加载,浏览器同步,文件监视器)的"babel-dev-server" .

一种可能性是使用浏览器同步作为静态服务器,例如并行dist运行babel src --out-dir dist --watch.但这不包括热重载,对我来说似乎有些笨拙.此外,如果您可以为JS文件提供哈希以更好地控制缓存,那么它对构建和开发步骤仍然有用.或者我可以配置像webpack这样的构建工具,以便它不执行捆绑但仍然执行一些转换(比如将哈希放在导入的文件名中)？

更新(10/2018):为了能够做我所描述的,目前似乎没有"标准方式".它提供了开发新构建工具或定制/开发现有构建工具的机会.它应该类似于webpack和webpack-dev-server(包括用于热重新加载的简单设置),但不应该再捆绑文件.可以定制webpack来完成所需的操作,在这种情况下,一个工作示例设置可以很好地说明开发和构建周期.我目前没有时间这样做,但如果有人建立或想要建立第一次尝试,欢迎他们将他们的进展添加为评论或回答.

根据材料设计指南：

滚动时，顶部应用程序栏可以以下方式进行转换：
-向上滚动隐藏顶部应用程序栏
-向下滚动显示顶部应用程序栏
当顶部应用程序栏滚动时，其在其他元素上方的高度变得明显。

在material-ui-next中是否有任何内置方法可以执行此操作，还是应将其视为新功能？您能否提示如何按照指南中所述实现AppBar组件的动画？