You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on May 10, 2023. It is now read-only.
I'm not able to set styles on the button component of the SelectMenu component for different modes. I've tried setting them in the theme, using applyTheme and buttonProps on the component. popoverProps works as expected, but buttonProps does not:
{subjectSelectionOptions && (
<Field
component={SelectMenuField.Formik}
hasTags
isMultiSelect
label="Subjects"
placeholder="Select subjects..."
name="subjects"
options={subjectSelectionOptions}
popoverProps={{ backgroundColor: "info300", color: "red" }}
buttonProps={{ backgroundColor: "info500" }}
/>
)}
With applyTheme, this works for both default and dark modes:
const GPSelectMenu = applyTheme(SelectMenu, {
Button: {
styles: {
base: {
border: "1px solid",
borderColor: "gray700",
background: "linear-gradient(#27303f, #303847)"
}
}
}
});
I'd like to be able to change the background gradient and borderColor for the Button in the SelectMenu component in some manner-- ideally in the theme, but I'd also be happy with buttonProps or applyTheme.
Device information (please complete the following information):
Chrome 87 & FF Dev Ed.
The text was updated successfully, but these errors were encountered:
Describe the bug
I'm not able to set styles on the button component of the SelectMenu component for different modes. I've tried setting them in the theme, using applyTheme and buttonProps on the component. popoverProps works as expected, but buttonProps does not:
{subjectSelectionOptions && (
<Field
component={SelectMenuField.Formik}
hasTags
isMultiSelect
label="Subjects"
placeholder="Select subjects..."
name="subjects"
options={subjectSelectionOptions}
popoverProps={{ backgroundColor: "info300", color: "red" }}
buttonProps={{ backgroundColor: "info500" }}
/>
)}
With applyTheme, this works for both default and dark modes:
const GPSelectMenu = applyTheme(SelectMenu, {
Button: {
styles: {
base: {
border: "1px solid",
borderColor: "gray700",
background: "linear-gradient(#27303f, #303847)"
}
}
}
});
This has no effect:
const GPSelectMenuModes = applyTheme(SelectMenu, {
modes: {
dark: {
Button: {
styles: {
base: {
border: "1px solid",
borderColor: "gray700",
background: "linear-gradient(#27303f, #303847)"
}
}
}
}
}
});
To Reproduce
See the code above.
Expected behavior
I'd like to be able to change the background gradient and borderColor for the Button in the SelectMenu component in some manner-- ideally in the theme, but I'd also be happy with buttonProps or applyTheme.
Device information (please complete the following information):
Chrome 87 & FF Dev Ed.
The text was updated successfully, but these errors were encountered: