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
}
Related
I map over an array of colors, which is defined in the database. I want to pass this colors as background for the created divs. Like I am used to, the console shows me, that the colors out of the array are passed in as prop. But using the props in styled components not works in typescript. I tried the following, what I have found in the net:
import * as types from 'styled-components/cssprop'
import type {} from 'styled-components/cssprop';
/// <reference types="styled-components/cssprop" />
I only passed this variations into my file.
The both snippets:
<ColorHolder>
{item.colors.map((color)=>(
<div color={color}></div>
))}
</ColorHolder>
css:
& div{
width:20px;
height:20px;
border-radius:50%;
background:${props=>props.color};
}
As far as I understand your code, you don't need to use any libraries.
Here is the working example, where colors in the array you fetched from backend
<div>
{
colors.map(color=>(
<div style={{backgroundColor: color, height: "50px",width: "50px"}}>
.
</div>))
}
</div>
Here's full example - codesandbox.io
Only styled components can receive props for this style adaptation technique.
Therefore in your case simply create a quick styled div:
const StyledDiv = styled.div<{ color: string }>`
background: ${props => props.color};
`;
<ColorHolder>
{item.colors.map((color) => (
<StyledDiv color={color}></StyledDiv>
))}
</ColorHolder>
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
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.