How can I add general styles to my page inside of one of my components. For example, I when my components loads, I want to add a style like this to whole page:
*{
direction:rtl;
}
and when the component unmounts, I want the style to be removed. I am using css modules for styling.
We can do it using jsx style:
<style jsx="true">
{`
* {
direction:rtl;
}
`}
</style>
Related
Material UI Dialog is a portaled component. The way I understood it and saw it in action is that it renders its markup outside the React's root element.
It renders itself before the </body> tag.
Now I have encountered a problem because of this.
When user chooses the dark mode, I set a dark class on top-level element, one beneath the root element.
And on all components I can use dark variant to apply styles, like dark:bg-zinc-700.
But when I apply it the <Dialog /> component, it won't affect its style, though I can see that the class exists in the output.
<Dialog
PaperProps={{
className="dark:bg-zinc-700"
}}
How should I solve this problem? I know I can use sx to apply style. But that means I need to lose consistency and I also don't know how to translate Tailwind to sx. Thus I prefer to keep using Tailwind.
I solve this problem with this Link
MuiDialog: {
defaultProps: {
container: rootElement,
},
},
Check this
#HosseinFallah Looking back at your post I think this won't work because tailwind and material ui handle dark modes differently. However, you can target Material UI css without using sx. You can use the Dialog API classes in your css and apply tailwind colors on them like this in your global css:
.MuiDialog-paperScrollBody {
background-color: theme(colors.dark) !important;
}
Where dark is the custom dark color you've set in your tailwind.config.js
To add to the answer you can also set this for your whole app by wrapping it with the Mui's StyledEngineProvider. This way tailwind will be prioritized when injecting styling.
In your index.tsx
import { StyledEngineProvider } from '#mui/material';
const container: any = document.getElementById('root');
const root = createRoot(container);
root.render(
<Provider store={store}>
<React.StrictMode>
<StyledEngineProvider injectFirst>
<App />
</StyledEngineProvider>
</React.StrictMode>
</Provider>
);
Then this will be possible without needing to specify !important
<Dialog
PaperProps={{
className="dark:bg-zinc-700"
}}
Did you set the "important" property in the Tailwind config (tailwind.config.js) by chance?
If you set it to something like "#root" then it will only match the elements inside the #root element which is bypassed when MUI uses React Portals.
You could change it to something like "#tw" and then set your body's ID to "tw" so it will always match since Portals are always children of the body element.
if you completely interoperate to tailwindcss, see: https://mui.com/material-ui/guides/interoperability/#tailwind-css
i think this mistake occure in tailwindcss.config.js.
by adding another id to wrap dialog container and asign it to "important" property will solve this problem
You can increase the specificity of the TailwindCSS by using !important selector.
You can find more here https://tailwindcss.com/docs/functions-and-directives
I have a dataTable component looke like below:
<template>
<lightning-datatable
class="pw-table"
key-field="id"
columns={columns}
data={data}
hide-checkbox-column
></lightning-datatable>
</template>
Now I want write some custom css to make table header higher,
.pw-table {
height: 300px;
}
but useless, so how I can do it?
I use loadStyle but failed, I dont know why?
import { loadStyle } from 'lightning/platformResourceLoader';
import accountCustom from '#salesforce/resourceUrl/accountCustom';
You should treat Lightning base components as black boxes. The internal elements of an LWC are protected by the Shadow DOM and Lightning Locker. You cannot style them with your CSS, and you cannot interact with them via JavaScript.
You can style the top-level element (which is actually what you've done here), but you can't style elements within the component. See CSS Style Sheets in the Lightning Web Components Dev Guide.
A parent component can style a child component, but it styles it as a single element.
How can I access to inner css classes of children of a component and add or change styles to/of them? like I want to change and customize material ui stepper steps circle font size and color and so on.
How can I write css classes like bellow:
.stepper circle {
font-size:18px;
}
or
.stepper .text {
font-size:18px;
}
thanks.
Thanks to #spakmad's answer, but that's not exactly what I meant, maybe my question was not clear enough. I meant how to write above mentioned CSSs in material ui object style classes format(classes injected with withStyle HOC).
I found my solution:
stepper:{
'& circle':{
fontSize: '18px'
}
}
and
stepper: {
'& .text': {
fontSize: '18px'
}
}
The very straightforward way to do it without having to worry about classes is by using the material-ui style prop. Like so,
<Stepper style={{ fontSize: '18px' }} />
This applies a style to the root element, which I assume to be a div or container of sorts, although it probably varies by the component.
More specifically, and what you probably want to do is use material-ui classes prop. That is, since you know exactly what classes you want to override, you can do so as follows,
<Stepper classes={{ text: { fontSize: '18px' }}} />
I use text here as a classname because in the question, .text appears to reference and already existing class. Since you're trying to increase the size of the font in this svg that comes with the Stepper. You'll need to get the class name applied to the svg and override it. In this case, one of its classnames is MuiSvgIcon-root-184 so you would expect to be able to do,
<Stepper classes={{ MuiSvgIcon-root-184: { fontSize: '18px' }}} />
This classname however is generated by material-ui dynamically based on the layout resulting from props and could be different across all renders.
TLDR
So, trusty className component and writing some css and component JSX as follows.
<Stepper className={'customStepper'} />
.customStepper svg: {
font-size: '18px !important',
}
You need to include !important to make sure this style is respected. Material UI by default puts its styles last in the document so they're normally overwriting anything else, but the !important spec should override the override.
How can I style a custom tag with Styled Components?
I want to style an image with AMP HTML which needs an amp-img tag, not a img.
Here is what I would like to do:
const Image = styled.('amp-img')`
filter: blur(2px);`
Thx!
You may refer with this AMP HTML Components documentation.
Styling and theming of AMP-provided components is all done via CSS. See the AMP Spec for more detail.
AMP elements can be styled with class or element selectors using most common CSS properties. Add any styles to an AMP page using a single <style amp-custom> tag in the head of the document. For example:
<style amp-custom>
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
Also from this page, it stated that amp-img can be styled directly via CSS properties. Setting a grey background placeholder for example could be achieved via:
amp-img {
background-color: grey;
}
Hope this helps!
You can't style an amp tag directly via styled components. Instead you can wrap it with a div and style that div.
const Image = styled.div
filter: blur(2px);
<Image><amp-img /></Image>
Let imagine I import library react-select or any other that I don't have direct access to its component and jsx. Is it possible to pass your own style to child DOM element like drop down menus from other library. Like your can with normal css div div div{... here you will style only children}. I am using Radium.
In my case I want to change the z-index of Select Select--single is-searchable class and style drop down menu.
Radium provide so called Style component that allows you to style such components that you imported from other libraries Link: https://github.com/FormidableLabs/radium/tree/master/docs/api#style-component.
Example:
<Style
scopeSelector=".scoping-class"
rules={{
color: 'blue',
span: {
fontFamily: 'Lucida Console, Monaco, monospace'
}
}}
/>