FOUC с React Select - PullRequest
Новая
       29

FOUC с React Select

0 голосов
/ 12 февраля 2019

Пожалуйста, смотрите эту страницу: https://farmacia33.it

Это проект с React 16, Redux, SSR, Emotion CSS-in-JS, позволяющий пользователю изменять цвета через admin и React Select 2.

В асинхронном компоненте выбора заголовка можно увидеть флэш-содержимое без стиля.

Вот код для этого компонента, заключающий в себе Асинхронность React Select: 

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)

подпрограммы primaryColor из Redux не должны изменяться, поскольку они повторно перетаскиваются в initialState сервером в переменную окна.

Я не могу понять FOUC.Более того, иногда он не создает необходимый тег styles и визуализирует без какого-либо стиля!

Есть идеи?

Спасибо, Маттео Франа

...