0728
工作
- css 问题：最后一个子元素占据剩余空间 ？(这个问题经常忘记)
使用 flex: 1; 实现，但是 flex: 1 具体代表什么含义呢？
css
flex: 1;
/** 等价于 */
flex: 1 1 0%;
/** 具体属性依次为 */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/** 具体属性 */
flex-shrink: 1; /* default 1 */
flex-grow: 1;
flex-basis: 0%; /* default auto */具体作用：
- flex-grow: flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
- flex-shrink: 如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小
- flex-basis: flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
资料：
问题 2：
- dvajs 中获取 state，之前有记录过，在同步操作 reducer 的时候，第一个参数里可以拿到；但是如果在 effects 里面，需要通过 select(state => state.xxx) 获取。我已开始以为 select 第一个参数 state 是当前 model 的 state，实际上我错了，试错后 打 log 发现，这个 state 是全局的所有 model 都在里面。因此获取当前 mode，需要使用方式为:
js
effects: {
*updateMasterInfo({ payload }, { call, put, select }) {
const currentState = yield select((s: OptionsConfigState) => s.currentState);
yield put({
type: 'currentState/updateState',
payload: {
masterInfo: data,
},
});
},
}特别需要注意，要加上 yield 关键字，上述三个方法 call, put, select 都是如此
问题3：:global(){} 覆盖弹 框样式 失败
使用 css-module 的方式，即 :global() 去替换 AntD 样式，需要注意个问题，就是关于 弹框有关的组件（Modal，Popconfirm，Dropdown等），若要覆盖样式，不是写在某个 组件内去覆盖，而是需要写在最外面，因为 弹框组件都是在最外层的。