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
Reduce specificity of default styles #101
Comments
The best would be possible turn off style entirely. |
Just a suggestion: Let us pass our own style? |
I don't like this option because it still forces the project to depend on
This is currently possible @HonzaMikula, as a global here. Yes. It would be better if // These no longer require the styles or `js-stylesheet`...
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
// ...So we must import ourselves...
import jss from 'js-stylesheet';
// If we didn't import this here, it would not be bundled into the project at all.
import TabStyles from 'react-tabs/styles';
class MyTabs {
componentDidMount() {
// Bit of extra work - but that's the point.
jss(TabStyles);
}
render() {
return (
<Tabs>
// blah blah
</Tabs>
);
}
} Right now this project adds An alternate implementation would move componentDidMount() {
if (useDefaultStyles) {
// Will fail if *optional* dependency is not included - this responsibility is on the client.
require('js-stylesheet')(require('../helpers/styles.js')); // eslint-disable-line global-require
}
}, But this approach is less optimal because the Also if you wanted to do this in a back compatible way, the main package could export import jss from 'js-styles';
import styles from './helper/styles';
import UnstyledTabs from './unstyled/tabs';
export default class Tabs {
componentDidMount() {
jss(styles);
}
render() {
return <UnstyledTabs {...this.props} />;
}
} Actually that last one is probably the best. Want a PR, @danez? If so, which one? |
It'd be awesome if we could pass a prop I think that for this to be possible the default styles would need to be included as inline styles ( I think you could also drop the dependency on |
The idea is to not force anyone to use a specific css technology. So instead of having style injected by default with import 'react-tabs/style/react-tabs.css'; Or it can be simply copied. It is a little bit more work to initially get the default style going, but a lot of people wanted to disable the default style (with Does that sound reasonable? What do you think? |
Sounds like the right solution to me 👍 |
Yep, sounds perfect to me! |
The BEM classes added to each component are super useful for applying custom styling. However, because the default styles have a high specificity (e.g.
.react-tabs [role=tab][aria-selected=true]:hover
), the purpose of adopting BEM is defeated slightly.I propose using low specificity BEM classes for the default styles, so that they may be overridden more easily
The text was updated successfully, but these errors were encountered: