FOUC与React Select

Question

请参阅此页： https://farmacia33.it

这是一个带有React 16，Redux，SSR，Emotion CSS-in-JS的项目，仅用于允许用户通过admin和React Select 2更改颜色。

您可以在标题异步选择组件上看到未样式化内容的Flash。

以下是该组件的代码，包装了React Select的Async：

import Async from 'react-select/lib/Async'
import { connect } from 'react-redux'
import { primary_s5_l90, primary_s20_l95, primary_s10_l75 } from '../../shared/lib/colors';

const getCustomStyles = primaryColor => ({
  control: (provided, state) => ({
    ...provided,
    borderWidth: 2,
    borderStyle: 'solid',
    borderColor: state.isFocused ? primary_s10_l75(primaryColor) : primary_s5_l90(primaryColor),
    borderRadius: '2em',
    boxShadow: 'none',
    height: 50,
    '&:hover': {
      borderColor: primary_s10_l75(primaryColor),
    },
    borderBottomLeftRadius: state.menuIsOpen ? 0 : '2em',
    borderBottomRightRadius: state.menuIsOpen ? 0 : '2em',
    borderBottom: state.menuIsOpen ? 'none' : provided.border,
  }),
  valueContainer: (provided, state) => ({
    ...provided,
    padding: '7px 10px 7px 25px'
  }),
  menu: (provided, state) => ({
    ...provided,
    marginTop: 0,
    border: `2px solid ${primary_s10_l75(primaryColor)}`,
    borderRadius: '2em',
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    borderTop: 0,
    boxShadow: 'none',
    overflow: 'hidden'
  }),
  option: (provided, state) => ({
    ...provided,
    backgroundColor: (state.isSelected || state.isFocused) ? primary_s20_l95(primaryColor) : provided.backgroundColor
  }),
  indicatorsContainer: (provided, state) => ({
    ...provided,
    paddingRight: 15,
    color: primary_s10_l75(primaryColor),
    fontSize: 15
  }),
  indicatorSeparator: () => ({
    display: 'none'
  })
})

const AsyncSelect = props => (
  <Async styles={getCustomStyles(props.primaryColor)} {...props}></Async>
)

const mapStateToProps = state => ({
  primaryColor: state.store.data.loghiTemplate.brandColor,
})

export default connect(mapStateToProps)(AsyncSelect)

来自Redux的primaryColor道具不应更改，因为服务器会在window变量中将其在initialState中重新补水。

我听不懂FOUC。 而且，有时它不创建必要的styles标签，并且呈现时没有任何样式！

有什么主意吗？

谢谢你， Matteo Frana