Able to reference nested component in Theme

[siriwatknp]

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: {},
    }
  }
}

[oliviertassinari]

If I take @dy's use case of #15476,

  overrides: {
    MuiTableBody: {
      MuiTableRow: {
        root: {
          "&:nth-of-type(odd)": {
            backgroundColor: "rgba(251,251,251,1)"
          }
        }
      },
    },
  }

once we merge #15140, we will be able to do:

  overrides: {
    MuiTableBody: {
      root: {
        "& .MuiTableRow-root:nth-of-type(odd)": {
          backgroundColor: "rgba(251,251,251,1)"
        }
      }
    },
  }

in v3, I would probably do:

  overrides: {
    MuiTableBody: {
      root: {
        "& tr:nth-of-type(odd)": {
          backgroundColor: "rgba(251,251,251,1)"
        }
      }
    },
  }

@siriwatknp Thank you for linking NativeBase system. I don't think that we should reimplement CSS cascading in JavaScript, I think that it's better to rely on Cascading Style Sheets.