Possible to remove emotion as dependency? #4301

mahaveer0496 · 2020-11-27T09:55:45Z

mahaveer0496
Nov 27, 2020

Not everyone uses Emotion/SC, would be good if some other lightweight or pure CSS solution could be used for styling.

AndreaBarghigiani · 2020-11-30T15:13:52Z

AndreaBarghigiani
Nov 30, 2020

This does not look like the first time this kind of feature is requested and I whould love to have some guidance on how to accomplice it.
This component is simply amazing but the fact that I will have so many <style> around the page does not make me all that happy, and I totally get it why it is so difficult to do otherwise.

Since we are in the discussion part of the project I whould like to give you my two cents on how I approached this problem because in the project I am working on in my company we're not using emotion/styled-components that much and even if I like the syntax we're trying to keep the bundle size small and we generate CSS to be loaded when required.

So here's my two approaches.

To whom want's to get rid of all `react-style` CSS

This is the 'harderst' and surely the ugliest part: you just need to return an empty object:

const customStyles = {
	option: () => ({}),
	control: () => ({}),
	// and so on...
}
<Select
	// ... other props
	styles={ customStyles }
/>

As already stated I do not like this approach at all but if you do so the component will not even add the style [data-emotion="css". Also you find an hint right into the documentation, if you look closer the control does not get the provided attribute as explained in the comment 😉

Leverage the CSS specificity (my favorite)

If you need to override custom styles and do not want to work with emotion/styled-component just leverege the power of CSS. At the end of the day, even if it is inline, it still a CSS class that lives in a <style> kept in the <head> of your page. This means that you ~~should be~~ are able to override them simply with a selector that has a stronger specificity.

And you know what? react-select already gives you the ability with the className and classNamePrefix props.

<Select
	className="your-wrapper-selector"
	classNamePrefix="your-prefix"
	// ... other props
/>

And now all you have to do in your S/CSS is

.your-wrapper-selector .your-prefix__control{
	/* Custom styles for control */
} 

.your-wrapper-selector .your-prefix__input{
	// Custom styles for input */
} 

.your-wrapper-selector .your-prefix__menuPortal{
	/* Custom styles for menuPortal */
}

This is definetly the approach that I am taking because I can leverage many of the styles already applied but also customize as much as I want without !important or other tricks.

I hope that this will help anyone that, like me, was looking for a way to customize this component. Not any kind of expert here, simply looks to me to have "found" (well it was kinda of documented already) a way that will respect the approach I keep in the project I am building 😊

For the next one... Well pb I'll use some SSR solution since seems that Emotion has already thought about it 😉

2 replies

Rall3n Nov 30, 2020
Collaborator

I have a suggestion which could make the "hardest" part much easier:

Instead of creating a complete object to overwrite every single style key I suggest using a Proxy:

const styleProxy = new Proxy({}, {
    get: (target, propKey) => () => {}
});

<Select styles={styleProxy} {...} />

AndreaBarghigiani Nov 30, 2020

I do not have experience with Proxy at all, your solution seems very interesting though. Thanks for the contribution 😉

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Possible to remove emotion as dependency? #4301

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Possible to remove emotion as dependency? #4301

mahaveer0496 Nov 27, 2020

Replies: 1 comment · 2 replies

AndreaBarghigiani Nov 30, 2020

To whom want's to get rid of all react-style CSS

Leverage the CSS specificity (my favorite)

Rall3n Nov 30, 2020 Collaborator

AndreaBarghigiani Nov 30, 2020

mahaveer0496
Nov 27, 2020

Replies: 1 comment 2 replies

AndreaBarghigiani
Nov 30, 2020

To whom want's to get rid of all `react-style` CSS

Rall3n Nov 30, 2020
Collaborator