Is it possible to pass an isolated className to a custom component using CSS Modules, so I can use it inside this component?
<CustomComponent className={style.foo}/>
Related
We integrated a library into our Creatives project similar to how is being used in one of our pages.
I noticed that when i interact with a graph
there are lots of empty <style data-jss> tags are being generated and are overriding the current style of the page.
Those styles are being injected by mui and are overriding initial styles
and breaking the current page design
The solution for this name collusion was found in mui docs
https://v4.mui.com/styles/api/#creategenerateclassname-options-class-name-generator
const generateClassName = createGenerateClassName({
seed: 'ctv-'
});
by adding
<ThemeProvider>
<StylesProvider generateClassName={generateClassName}>
...
</TheamProvider>
I want to create a web component using svelte. To create a web component it's necessary to include the svelte tag option
<svelte:options tag="{"my-custom-component}"></svelte:options>
It creates a custom component with that name but doesn't work properly because we have to provide this tag for all the child components as well! I added it to all the child components but it still doesn't work, turns out I use third-party libraries and I don't know any way to have that option there!
Is there a way to create the custom components with svelte which includes third-party libraries?
You can use regular svelte components (including third party) ones inside your component.
But you'll need to compile those with different compiler settings in your rollup/webpack config.
And due to the nature of scoped styling in web components (Shadow DOM) the css won't work in these components. So it depends on the library if it still works.
You might be able to turn off scoped styling in the future:
Issue #1748: Custom element without shadow DOM
But scoped styling could have been the reason why you wanted/needed webcomponents in the first place.
I am trying to pull out all of the common styles used throughout an application and storing them in a stylesheet and material ui theme file - this way I can update the base styling of all input fields for example in one place.
I am using the react-select element in a component as a dropdown for a country code picker, although I cannot seem to use material ui's useStyle/makeStyles feature to call the theme's styling within the custom react-select's styling block.
Does anyone have any idea of how to use mui theme elements within the react-selects custom styling block?
Since Angular uses view encapsulation is it possible to support multiple themes in Angular 2? I mean the user should be able to click on a button and change the color theming of the whole application.
PS: I am using Angular 4 with angular-cli with SASS support.
Currently I am able to generate static themes with a _variable.scss file which is imported in each component's sass based stylesheet.
But, my requirement is end user should be able to choose his own color theme.
Ideally in non-angular websites I would just add a new compiled css file to the <head> tag using javascript. Since shadow DOM generates separate style for each component and adds them in to the <head> how I change the style for each component dynamically?
you can try the css method var(), for more details can read this blog
I'm working on a React/Redux app with Webpack that displays UI components and allows the user to change colors of those components. I am styling using CSS Modules with scss. I would prefer to keep all the styling within the scss files rather than doing any inline styles with JS. I am looking for a way to pass properties from the React component into the corresponding scss file.
For example, I'm getting the button color from the React props. I need to find a way to turn that into a Sass variable and inject into the scss file. Is there a way to accomplish this?
I think that the best option is to use react-css-themr. With it you can assign class name based to selection of user, or, in your case, you can use the context-theming for choose right scss to apply on component.
This is used on react-toolbox project for theming the material components, if you want to watch a good example.