-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature Request: Styling with styled-components #2146
Comments
hey @agirton , does that mean you would be open to accepting a PR for this? |
What exactly would this require in order to implement? |
sorry for the delay, i missed the notification styled-components provides sass-like syntax for nested classes, so an mvp could just provide a couple of sc-component that act as an anchor point for the styles. Simplified Example for import styled from 'styled-components';
import { boxSizing } from './helper'; // this file has to be created as well
const StyledSelect = styled.div`
position: relative;
// disable some browser-specific behaviours that break the input
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
display: none !important;
}
// preferred box model
&,
& div,
& input,
& span {
${boxSizing('border-box')}
}
`;
export default StyledSelect; To-Do's:
Optional (but recommended) steps would be:
Subsequent PR's could then expand the styled-components idea and get rid of the nested classes, and instead introduce new sc-components that properly encapsulate styles. Also, wrapping the (previously created) style settings file in a styled-components theme. |
I'm planning to move this over to a css-in-js library for the next major version, but it will probably be something lighter-weight than styled-components (as much as I love that library, it adds a lot of overhead) I'm also expecting to do some proper cleanup of how the internal components are organised and extendable so I wouldn't recommend anyone picking this up as a PR for now, there's a really high change it wouldn't end up being merged 😐 To hint at the future, it looks like we'll be using react-select in atlaskit which uses styled-components, so I understand the concerns @tobilen raises and whatever the next version is should be much more friendly to js-based themeing. |
We are currently in the process of migrating our component library to styled-components, and react-select is kind of a showstopper there. The styling is complicated, and overriding it would be a bug-riddled mess. So for now, the plan is to keep our sass loader for it.
While react-select is a really great component, styling feels unwieldy and cumbersome. I'd propose porting it to styled-components while ditching all (now) unnecessary nesting in the process. All sc-components should of course be exportable for easy extending, plus a theme would be nice to cover the setting-sass-variables way of doing styling.
The text was updated successfully, but these errors were encountered: