fix(ui): add unstyled prop to react-select so that payload styles take priority (#8572)

Adds `unstyled={true}` prop to the react-select element so that
payload's styles take priority. Due to the way react-select adds its own
styles (injected into the page) they were higher specificity due to not
being in a layer.

Fixes this bug with our styles' specificity not being applied 

![image](https://github.com/user-attachments/assets/1cd216a4-8125-4312-949e-168c7eb96186)


Also fixes https://github.com/payloadcms/payload/issues/8507
This commit is contained in:
Paul
2024-10-07 10:36:15 -06:00
committed by GitHub
parent 67e6ad8168
commit 2a1321c813
2 changed files with 2 additions and 1 deletions

View File

@@ -8,7 +8,6 @@
.react-select { .react-select {
.rs__control { .rs__control {
@include formInput; @include formInput;
height: auto;
padding: base(0.4) base(0.6); padding: base(0.4) base(0.6);
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@@ -45,6 +44,7 @@
.rs__group-heading { .rs__group-heading {
color: var(--theme-elevation-800); color: var(--theme-elevation-800);
padding-left: base(0.5); padding-left: base(0.5);
margin-top: base(0.25);
margin-bottom: base(0.25); margin-bottom: base(0.25);
} }

View File

@@ -106,6 +106,7 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
onMenuClose={onMenuClose} onMenuClose={onMenuClose}
onMenuOpen={onMenuOpen} onMenuOpen={onMenuOpen}
options={options} options={options}
unstyled={true}
value={value} value={value}
/> />
) )