Comments (8)
My bad, when I meant 'I cannot externally theme the component anymore', i wanted to say that if a themeB is applied to a parent element of the component, since the component is already themed by themeA, themeA will always override themeB.
from stylex.
This is expected behaviour as it is how CSS variables work. To give you a peek behind the scenes, this the CSS that would be generated:
(I'm using readable names, but the actual output would use hashes)
:root {
/* colorScheme = defineVars */
--primary: red;
/* myComponentVars = defineVars */
--text: var(--primary);
}
.theme {
--primary: green;
}
Setting the theme in JS, is essentially setting a class name which sets a new value for --primary
. However, the value for --text
has not changed. The value for --text
was only set globally, and at that level --primary
is still red
.
Here's the workaround:
import React from 'react';
import { colorScheme } from './colorScheme.stylex';
import { myComponentVars } from './myComponentVars.stylex';
const theme = stylex.createTheme(colorScheme, {
primary: 'green',
});
const componentTheme = stylex.createTheme(myComponentVars, {
text: colorScheme.primary,
});
const styles = stylex.create({
container: {
color: colorScheme.primary, // <- theme is applied (output green)
color: myComponentVars.text, // <- theme is not applied (output red)
},
});
export const MyComponent = () => <div {...stylex.props(styles.container, theme, componentTheme)}>TEXT</div>;
This will re-assign the value of --text
to the new local value of --primary
.
from stylex.
@nmn The problem of this workaround is that I cannot externally theme the component anymore, because it's already using a theme internally.
from stylex.
Themes, created with CSS variables, don't need to be on the component itself. They can be set on a parent element.
from stylex.
Sure but it will be overridden by the local theme in the component div
from stylex.
@olivierpascal Since the component is not being styled by StyleX, I think you'll need to use a different system to override its styles.
from stylex.
Explain your problem a bit further. With some code examples?
from stylex.
Closing this issue as it seems addressed and there have been no follow-ups. Will re-open if you message again @olivierpascal
from stylex.
Related Issues (20)
- Focus for input type range HOT 1
- Integration with Create React App by default, including types support for typescript HOT 2
- RFC: esbuild plugin HOT 2
- An option for the babel plugin that transforms the debug/dev classes. HOT 2
- Support Older React Versions HOT 3
- CSS Properties don't get written (esbuild) HOT 1
- Add ability to customise class names generation so we can use one letter classnames. HOT 5
- StyleX Plugin for Bun.sh Bundler HOT 6
- gridTemplateRows 0fr is being compiled to 0px, which breaks css transition HOT 4
- esbuild plugin with write:false should set file name HOT 3
- [RFC] Define value for multiple pseudo-classes at one HOT 2
- [@styles/open-props]: Has any plan/progress to support `ESM`? HOT 2
- Strange :not(#\\#) selector HOT 1
- Add option to support vertical writing modes in modern browsers
- How can I use container queries with StyleX? HOT 1
- I can't make changes to the interface (next.js & react) HOT 1
- Media query specificity order. Certian properties broken (`gridColumn`) HOT 3
- Only static values are allowed inside of a stylex.create() call. HOT 5
- Need help with Qwik.
- '0px' vars are compiled to '0' which leads to error at best, unpredicatable results at worst 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 stylex.