SSR classNames not matching when using Style Object

Hello,

I’m integrating react-select to my SSR implementation, and currently I’m having issues with classNames not matching:

Warning: Prop className did not match. Server: “css-1u7qna3” Client: “css-6xc8cw”

My Select declaration is as follows:

<Select
    instanceId={this.props.elementConfig.name}
    value={selectedOption}
    onChange={this.handleChange}
    options={options}
    styles={customStyles}
    className='Occupation'
    classNamePrefixunion='Option--'
/>

The problem seems to happen when I try to use the styling object, as per the documentation below:

https://react-select.com/styles

I was wondering if someone else has experienced this issue and would care to help.

[bmsuseluda]

The instanceId doesn’t fix it for me.

<ReactSelect
        instanceId={label}
        className={styles.dropdown}
        classNamePrefix="pcc-dropdown"
        options={options}
        value={value}
        defaultValue={defaultValue}
        isLoading={isLoading}
        isDisabled={isDisabled}
        onChange={handleOnChange}
        placeholder={placeholder}
        components={{ DropdownIndicator, Menu }}
        isSearchable={false}
        ariaLabel={label}
      />

Without instanceId i’m getting the error: Warning: Prop id did not match. Server: "react-select-24-input" Client: "react-select-2-input"

In another issue i learned that i have to set the instanceId. With id instanceId the prop id warning is away but now i’m getting the className prop warning.

Is there something i’m missing? thanks

[adamsoffer]

I also was having this issue. Giving it an instanceId seemed to fix it for me.