Able to reference nested component in Theme #15002
Description
Intro
If you are already familiar with native-base, just skip this part.
I was theming native-base yesterday and I thought it would be great if we can do something like that in MUI. Theming in native-base is quite similar to MUI in terms of the structure. It has global theme that will be injected using StyleProvider and connectStyle (= withStyles in MUI) to component that we want to customize. For example,
// In CustomComponent.js
const styles = {
container: {
flex: 1,
backgroundColor: 'green',
},
textContent: {
fontSize: 20,
color: 'red',
},
};
class CustomComponent extends Component {
render() {
// connect styles to props.style defined by the theme
const styles = this.props.style;
return (
<View style={styles.container}>
<Text style={styles.textContent}>
Your Component with static style
</Text>
</View>
);
}
}
// connect the component to the theme
export default connectStyle('yourTheme.CustomComponent', styles)(CustomComponent);// In App.js
import { Text, StyleProvider } from 'native-base';
import getTheme from './native-base-theme/components';
import material from './native-base-theme/variables/material';
export default class ThemeExample extends Component {
render() {
return (
<StyleProvider style={getTheme(material)}>
<Text>
I have changed the text color.
</Text>
</StyleProvider>
);
}
}Here!
- StyleProvider = MuiThemeProvider
- ConnectStyle = withStyles
- styles = classes
This is what we can do when we want to customize a text inside NativeBaseCard
function CustomComponent() {
return (
<Card custom1>
<CardItem>
<Text>
</Text>
</CardItem>
</Card>
);
}
const theme = {
'NativeBaseCard': {
'.custom1': {
// any style you want to apply
// only affect to <Card custom1> and its children
'NativeBaseText': {
color: '#e5e5e5',
}
}
}
}- This is not a v0.x issue.
- I have searched the issues of this repository and believe that this is not a duplicate.
Expected Behavior 🤔
What if MUI is able to reference nested component inside the parent, I think it would be really nice and we can completely separate logic and styles in the component.
const theme = {
MuiCard: {
MuiCardActions: {
MuiButton: {
fullWidth: {
margin: 0,
}
}
}
}
}
function App() {
return (
<Card>
<CardActions>
<Button fullWidth>
</Button>
</CardActions>
</Card>
);
}Current Behavior 😯
We have to use withStyles and write a lot of code. Not clean due to classes inside the component. I don't mean that withStyles is not important, it is very important. If the approach I suggest is possible, withStyles will be use when we want to create new component. For example,
const CustomComponent = withStyles(
{
card: {}, // default custom style in card
cardItem: {}, // default custom style in card item
},
'CustomComponent',
)(({ classes }) => (
<Card className={classes.card}>
<CardItem className={classes.cardItem}>
<Typography>
</Typography>
</CardItem>
</Card>
))
// and then,
// if you want to reuse CustomComponent in another project
// override in global theme here
const theme = {
CustomComponent: {
MuiCard: {
root: {},
},
MuiTypography: {
root: {},
}
}
}