Adding the style property works
<Card.Meta style={{ color: "#5D5C5C" }}>
{calculateTime(post.createdAt)}
</Card.Meta>
While adding class does not:
<Card.Meta className="my-color">
{calculateTime(post.createdAt)}
</Card.Meta>
What would you recommend to do in such case? I would prefer not to repeat inline styling
About this issue, you might want to use CSS module, it's still CSS, but only affect in one component only.
Note: this would prefer to work with React app and webpack, I haven't tested with other environment =)))
File structure:
|
|_ MyComponent.module.css
|_ MyComponent.js
MyComponent.module.css:
.myColor {
color: #5D5C5C;
}
MyComponent.js:
import styles from './MyComponent.module.css';
...
<Card.Meta className={{styles.myColor}}>
{calculateTime(post.createdAt)}
</Card.Meta>
Kind of stupid of me, you can just add a div inside and then apply the class to it
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 am currently trying to learn NextJS and I've decided to go with a simple weather api that collects data from given city. I've learnt some new stuff and I really like it so far. There is however one issue that I can't seem to solve and that would be adding a class with styling.
Now... Given the GIF below, you can see it DOES add the class when location is being typed but the styling does not change.
https://gyazo.com/55be0759cc8cc514905a7a661274f73c
The 'Home_main__1Z1aG' should change its height and font-size when I add the class but it doesnt. I've never experienced this before and I've made sure that I am targeting the correct div.
I use state to add the class to the 'Home_main__1Z1aG' div.
<main className={`${styles.main} ${searchedCity ? 'loc_set' : ''}`}>
<input value={searchedCity} placeholder="City, Country" className={styles.title} onChange={e => setSearchedCity(e.target.value)} />
</main>
My styling:
.loc_set {
height: 10vh;
.title {
font-size: 2.2rem;
}
}
One important thing to mention is that I've added SCSS to my project.
I think that I need to somehow render the whole div since it is serverside rendered, but am I thinking wrong or? I've basically tried moving my styling around to make sure nesting wasnt an issue, I've made sure that the class is correctly named etc..
Components in Next.js use CSS modules. Assuming that the HTML you've provided is in a component and not a page, you'll have to reference it using imports.
<main className={`${styles.main} ${searchedCity ? styles.locSet : ''}`}>
<input value={searchedCity} placeholder="City, Country" className={styles.title} onChange={e => setSearchedCity(e.target.value)} />
</main>
I am not sure if _ would work, so maybe change that to a hyphenated classname.
.loc-set {
height: 10vh;
.title {
font-size: 2.2rem;
}
}
You have to use ampersand:
.loc_set {
height: 10vh;
& .title {
font-size: 2.2rem;
}
}
something like this https://github.com/vhpoet/react-native-styling-cheat-sheet
bonus if there are properties for everything, not just styling. and anything else like this that would be helpful. thanks
Example in CSS:
background-color: '#ffffff';
In React.js:
style={{ backgroundColor: '#ffffff' }}
React.js uses CSS rules, so you just find in CSS
CSS Cheat sheet
Another document
[ THIS IS FOR REACT NATIVE ]
Yes, in the react native documentation you can find all the available style properties for the components
Link : https://reactnative.dev/docs/text-style-props, https://reactnative.dev/docs/view-style-props
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.
I cannot find better solution for theming. I have a sass-file with variables:
vars.scss:
$colors: (
dark: (
theme1: #0096dc,
theme2: #eb8200,
…
),
…
);
For now I pass theme prop to all components which should have some styling depending on which page user is viewing. In React I build classname like this:
<div className={styles[`button${theme ? `-${theme}` : ``}`]}>{children}</div>
and in sass I do:
#import 'vars';
.button{
/* basic styles */
font-size: 14px;
border: 1px solid;
#each $theme, $color in map-get($colors, dark) {
&-#{$theme} {
#extend .button;
border-color: $color;
color: $color;
}
}
}
But this is absolutely inconvenient, because I need to place such code every time I need to style element depending on theme.
There are solutions how to load different files with variables for theming in webpack, but I receive theme prop from redux, so webpack doesn't have access to that prop.
As well as, I cannot find solution to pass property from react component to sass. Only opposite.
No way to use variables in imports in sass. Still not implemented.
Unfortunately, Cannot use CSS-in-JS approach in current project.
Please help to find better approach.
I would make it a stateless functional component.
function BrightBox(props){
<div className={styles[`button${theme ? `-${theme}` : ``}`]}>
{props.children}
</div>
}
Then import it and use it. There is no need to pass theme around.
{user.notice ?
<BrightBox>
there are {user.notice.issues.size} outstanding issues!
</BrightBox>
: null
}