Comments (3)
Using inline styles is fine, and you are free to do that. But in my opinion, that should be left for dynamic values.
But remember, if you go with the inline style approach, you have to find a way to do pseudo selectors, media queries + all the other 'simple' things that you normally take for granted in CSS. Sure, it's possible to do all those in javascript, but it leads to unnecessary bloated code. (...Just try and make a simple selector widget with an icon before the text, with a hover + active state that should look slightly different on mobile and tablet devices. It's certainly possible in js, but not in a clean way.)
Stilr takes a different approach. We embrace css but gives you javascript to manipulate it. But you wont have trouble with the classic css namespace collisions, because all class names are based on a content hashes. In fact, don't mind the class name property. It's just an implementation detail to bypass having to reinvent simple css stuff.
from stilr.
So is there a way for me to pass in class names directly to tags? And does stilr just return a string that's a class I can use?
from stilr.
Yes, the create
method returns a string that you can use as a class name.
E.g.
const styles = StyleSheet.create({
container: {
color: 'blue'
}
});
// styles.container is now a string, containing: `_1UXA3k`
// Use this as your class name on tags/components
<AppComponent className={ styles.container } />
Stilr
takes the content of the container object and converts it to a content hash. That content hash is your class name.
You are free to add additional classes to your component besides the Stilr generated class. Since styles.container
is just a string now, you can use something like classnames to handle the concatenation or just plain old vanilla javascript like:
const classes = [
styles.container,
'your-class-name'
].join(' ');
<AppComponent className={ classes } />
from stilr.
Related Issues (20)
- Multiple values using arrays? HOT 4
- neccesary nesting? HOT 4
- Vendor prefixing? HOT 2
- Code in NPM isn't compiled HOT 2
- Allow style keys to be strings HOT 1
- How does this compare to "jss" and/or "j2c"? HOT 1
- Webpack plugin HOT 4
- Trouble importing Stilr via require() HOT 1
- What about debugging? HOT 7
- In hot-load mode, what if <App> doesn't re-render but a child of its does? HOT 4
- Allow prefix for tags
- Pretification HOT 1
- use babel 6 HOT 1
- Stilr & webpack - dynamic assets URLs HOT 1
- [email protected] doesn't satisfy peerDependencies on CI HOT 2
- Add eslint to CI
- v1.2.2 not working on internet explorer HOT 3
- j2c vs. stilr
- `content=""` is not rendered properly HOT 2
- Error: Cannot find module 'react/lib/CSSPropertyOperations' HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stilr.