Skip to content

Instantly share code, notes, and snippets.

@wilomgfx

wilomgfx/Overriding Material UI styles with Styled Components.js

Forked from Danilo-Araujo-Silva/Overriding Material UI styles with Styled Components.md
Last active May 4, 2018 17:13
Show Gist options
  • Save wilomgfx/6017dee8b45ac460bc7d28b143baee7a to your computer and use it in GitHub Desktop.
Save wilomgfx/6017dee8b45ac460bc7d28b143baee7a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. wilomgfx revised this gist May 4, 2018. 2 changed files with 52 additions and 28 deletions.
    28 changes: 0 additions & 28 deletions Overriding Material UI styles with Styled Components
    View file
    Original file line number Diff line number Diff line change
    @@ -1,28 +0,0 @@
    For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:

    First method (override Material UI classnames):
    1 - Add the property classes in the AppBar component:
    <AppBar classes={{root: 'my-root-class'}}
    2 - Override the styles with the styled components:
    styled(AppBar)`
    &.my-root-class {
    z-index: 1500;
    }
    `

    Second method (force specificity):
    styled(AppBar)`
    && {
    z-index: 1500;
    }
    `

    Third method (use a custom classname):
    1 - Add the classname in the classname property:
    <AppBar className={`my-class ${this.props.otherClassesFromPropertiesWithNeeded}`}
    2 - Override the styles with the styled components:
    styled(AppBar)`
    &.my-class {
    z-index: 1500;
    }
    `
    52 changes: 52 additions & 0 deletions Overriding Material UI styles with Styled Components.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    //For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:

    // First method (override Material UI classnames):
    // 1 - Add the property classes in the AppBar component:
    <AppBar classes={{root: 'my-root-class'}}
    // 2 - Override the styles with the styled components:
    styled(AppBar)`
    &.my-root-class {
    z-index: 1500;
    }
    `

    //Second method (force specificity):
    styled(AppBar)`
    && {
    z-index: 1500;
    }
    `

    //Third method (use a custom classname):
    //1 - Add the classname in the classname property:
    <AppBar className={`my-class ${this.props.otherClassesFromPropertiesWithNeeded}`}
    // 2 - Override the styles with the styled components:
    styled(AppBar)`
    &.my-class {
    z-index: 1500;
    }
    `;

    //Forth method
    const StyledLink = styled(Link).attrs({
    activeClassName: 'active'
    })`
    color: black;
    &.active {
    color: blue;
    }
    `;
    // or extract that magic classname:

    const activeClassName = 'active-link'

    const StyledLink = styled(Link).attrs({
    activeClassName
    })`
    color: black;
    &.${activeClassName} {
    color: blue;
    }
    `
  2. @Danilo-Araujo-Silva Danilo-Araujo-Silva revised this gist Jan 11, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Overriding Material UI styles with Styled Components
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@ Second method (force specificity):

    Third method (use a custom classname):
    1 - Add the classname in the classname property:
    <AppBar className={`my-class ${this.props.className}`}
    <AppBar className={`my-class ${this.props.otherClassesFromPropertiesWithNeeded}`}
    2 - Override the styles with the styled components:
    styled(AppBar)`
    &.my-class {
  3. @Danilo-Araujo-Silva Danilo-Araujo-Silva revised this gist Jan 10, 2018. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions Overriding Material UI styles with Styled Components
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,6 @@
    For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:

    First method (override Material UI classnames):

    1 - Add the property classes in the AppBar component:
    <AppBar classes={{root: 'my-root-class'}}
    2 - Override the styles with the styled components:
    @@ -12,7 +11,6 @@ First method (override Material UI classnames):
    `

    Second method (force specificity):

    styled(AppBar)`
    && {
    z-index: 1500;
  4. @Danilo-Araujo-Silva Danilo-Araujo-Silva revised this gist Jan 10, 2018. 1 changed file with 17 additions and 17 deletions.
    34 changes: 17 additions & 17 deletions Overriding Material UI styles with Styled Components
    View file
    Original file line number Diff line number Diff line change
    @@ -3,28 +3,28 @@ For example, to override the AppBar (https://material-ui-next.com/api/app-bar/)
    First method (override Material UI classnames):

    1 - Add the property classes in the AppBar component:
    <AppBar classes={{root: 'my-root-class'}}
    <AppBar classes={{root: 'my-root-class'}}
    2 - Override the styles with the styled components:
    styled(AppBar)`
    &.my-root-class {
    z-index: 1500;
    }
    `
    styled(AppBar)`
    &.my-root-class {
    z-index: 1500;
    }
    `

    Second method (force specificity):

    styled(AppBar)`
    && {
    z-index: 1500;
    }
    `
    styled(AppBar)`
    && {
    z-index: 1500;
    }
    `

    Third method (use a custom classname):
    1 - Add the classname in the classname property:
    <AppBar className={`my-class ${this.props.className}`}
    <AppBar className={`my-class ${this.props.className}`}
    2 - Override the styles with the styled components:
    styled(AppBar)`
    &.my-class {
    z-index: 1500;
    }
    `
    styled(AppBar)`
    &.my-class {
    z-index: 1500;
    }
    `
  5. @Danilo-Araujo-Silva Danilo-Araujo-Silva revised this gist Jan 10, 2018. No changes.
  6. @Danilo-Araujo-Silva Danilo-Araujo-Silva revised this gist Jan 10, 2018. No changes.
  7. @Danilo-Araujo-Silva Danilo-Araujo-Silva revised this gist Jan 10, 2018. No changes.
  8. @Danilo-Araujo-Silva Danilo-Araujo-Silva revised this gist Jan 10, 2018. 1 changed file with 30 additions and 1 deletion.
    31 changes: 30 additions & 1 deletion Overriding Material UI styles with Styled Components
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,30 @@
    For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root
    For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:

    First method (override Material UI classnames):

    1 - Add the property classes in the AppBar component:
    <AppBar classes={{root: 'my-root-class'}}
    2 - Override the styles with the styled components:
    styled(AppBar)`
    &.my-root-class {
    z-index: 1500;
    }
    `

    Second method (force specificity):

    styled(AppBar)`
    && {
    z-index: 1500;
    }
    `

    Third method (use a custom classname):
    1 - Add the classname in the classname property:
    <AppBar className={`my-class ${this.props.className}`}
    2 - Override the styles with the styled components:
    styled(AppBar)`
    &.my-class {
    z-index: 1500;
    }
    `
  9. @Danilo-Araujo-Silva Danilo-Araujo-Silva created this gist Jan 10, 2018.
    1 change: 1 addition & 0 deletions Overriding Material UI styles with Styled Components
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root