Last active
August 29, 2015 14:22
-
-
Save haustraliaer/85aced44471109b3db09 to your computer and use it in GitHub Desktop.
Everything is private to it's local context with no global side effects. But our library component allows it's parent to overide styles (without defining a million props).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.root { | |
width: 200px; | |
height: 200px; | |
background-color: red; | |
} | |
.title { | |
font-size: 20px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* here you just need to know what classes the library uses */ | |
.root { | |
width: 500px; | |
height: auto; | |
background-color: green; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* for the lib style */ | |
.library__root__3wefoi2 { | |
width: 200px; | |
height: 200px; | |
background-color: red; | |
} | |
.library__title__ewflnw3 { | |
font-size: 20px; | |
} | |
/* for the wrapping style */ | |
.wrapping__root__wk3jn2o { | |
width: 500px; | |
height: auto; | |
background-color: green; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- and the output markup, if I use the wrapping style --> | |
<div className='wrapping__root__wk3jn2o'> | |
<h2 className='library__title__ewflnw3'>Hello contrived example</h2> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var style = require('library.css') | |
if(typeof this.props.style !== 'undefined') { | |
// style is just an object (if using webpack/postcss) so we can use js to overide class keys | |
// (arbitrary merge function) | |
merge(style, this.props.style) | |
} | |
render() { | |
return ( | |
<div className={style.root}> | |
<h2 className={style.title}>Hello contrived example</h2> | |
</div> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// The wrapping component | |
var SomeLibraryComponent = require('SomeLibraryComponent') | |
var overidingStyle = require('libraryWrapper.css') | |
render() { | |
return ( | |
<SomeLibraryComponent style={overidingStyle} | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment