Comments (4)
yep! when I import my colors for direct use I need to look for the current theme as well, but nothing more serious than that.. (ie. a few lines) so no need to change anything in the library. thanks!
from react-with-styles.
Hi @aacotroneo! Thanks for the question. 😀
When using external libraries that require styles (this example is an actual snackbar from material-ui)
Although I don't have any experience with material-ui, I'm not sure it makes sense to run these styles through withStyles
in this case. Depending on the interface you are using, it may generate inline styles or CSS classNames (while injecting styles onto the page for those classNames). Instead, it seems like you could just pass the styles directly to your material-ui snackbar. What do you hope to get by passing these styles through withStyles
?
In some cases I find it better to only decorate the top level containers/components and pass a few props (like colors) to children and have them decoupled from any other dependencies.
Here again, I don't think I really understand what you are trying to accomplish. How does running these styles through withStyles
limit what props you can pass to children?
Do you think that exposing that in a tidy way may cause any problems, or that will go against maintainability/encapsulation?
The idea behind react-with-styles is to provide an abstraction layer so you don't have to think as much about how your styles are being handled. The interface determines whether you are using inline styles, CSS classNames, or a mixture of both. I think that exposing direct access to the styles will likely not be a great idea because of the added complexity to the library and the types of patterns that it would enable would likely hurt the maintainability of your app code.
But, it is quite possible that I don't actually understand your use-case. It would be much easier to discuss this concretely if you could provide some code examples of what you are hoping to do.
from react-with-styles.
Thanks for answering :)
I've been playing a little more and have a different perspective. May be what I'd want is to have access to the raw theme components through this library, so I can take advantage of all the theme management and to keep all that at one place.
Whenever I decorate my component with the withStyles, the theme structure and location is nicely hidden from it, as it's just injected.
But whenever I need to access (say a color from) the theme I end up requiring the theme files directly which spoils some of the magic.
import { withStyles, css } from './styles/with-styles'; // this is the main app theme
import {colors} from './styles/theme/colors'; // this is breaking encapsulation a bit
@withStyles(styles)
default class Component extends Component {
// I need colors.blue here from my theme to style a 3rd party component.
// I can't use withStyles because my component requires specific formats
// for its style related props (like color={xxx})
So, the specific usecase here would be - how'd you recommend to get such a reference to the current theme's blue color? (so I can pass it to a 3rd party component that requires a color prop). Shouldn't this library be responsible for locating that color somehow as well?
Thanks!
PS: I understand this would break some opaqueness on the other hand.. so I don't know how the API should be changed to allow something like this.
from react-with-styles.
You can still use withStyles only for the theme, no?
from react-with-styles.
Related Issues (20)
- An in-range update of enzyme is breaking the build 🚨 HOT 8
- How can I access child functions? HOT 1
- An in-range update of babel-preset-airbnb is breaking the build 🚨 HOT 2
- How to write hover effect HOT 1
- Contextualized theme ? HOT 1
- An in-range update of enzyme is breaking the build 🚨 HOT 1
- How can I return a react component using withStyles? HOT 2
- An in-range update of eslint-plugin-react is breaking the build 🚨 HOT 2
- Provide a `useStyles` method for using with React Hooks API HOT 5
- An in-range update of eslint-plugin-import is breaking the build 🚨 HOT 2
- An in-range update of eslint-plugin-jsx-a11y is breaking the build 🚨 HOT 2
- .git included in npm distribution in version 3.2.2 HOT 4
- how to get styles object into class type component that extends React.component HOT 5
- An in-range update of eslint-plugin-import is breaking the build 🚨 HOT 3
- Uncaught TypeError: Super expression must either be null or a function HOT 1
- An in-range update of eslint-plugin-react is breaking the build 🚨 HOT 2
- Selectors in CSS/JS not working as expected
- Context provider does not provide the interface HOT 1
- Add testing on React 17, once Enzyme has an adapter for it
- how to access children styles HOT 2
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 react-with-styles.