I am using the jss preset default and it comes with jss-nested.
I could get '&:hover' to work but '&:first-child' does not work for me.
sample code:
summaryItem: {
borderLeft: '2px solid red',
'&:first-child': {
borderLeft: '2px solid transparent',
}
}
You need to add a space for calling child selectors else it would be like calling div:first-child instead of div > :first-child
summaryItem: {
borderLeft: '2px solid red',
'& > :first-child': {
borderLeft: '2px solid transparent',
}
}
Related
I'm trying to modify the style of my scrollbar but I can't get it.
I have tried with the parameters: css, __css and sx.
Example:
__css={{
'&::-webkit-scrollbar': {
width: '2px',
},
'&::-webkit-scrollbar-track': {
boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
width: '2px',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'rgba(0,0,0,.1)',
outline: '1px solid slategrey',
borderRadius: '24px',
},
}}
As see on:
How to add ::-webkit-scrollbar pseudo element in Chakra UI element? (React)
Best way I use for basic customization, put the following code inside a .css or .scss or .sass file:
* {
scrollbar-width: thin;
scrollbar-color: transparent var(--primary);
}
*::-webkit-scrollbar {
width: 5px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: var(--primary);
border-radius: 0;
border: none;
}
You can check for more options at https://css-tricks.com/almanac/properties/s/scrollbar/
I try to loop through nested sass maps to create button classes. is this possible?
my maps are nested like this:
$buttons: (
primary: (
border: 1px solid #ccc,
border-hover: 1px solid #ccc,
color: red,
color-hover: blue
),
secondary: (
border: 1px solid #ccc,
border-hover: 1px solid #ccc,
color: red,
color-hover: blue
)
);
When i try to loop through it with an each loop, i just get the first layer of the map.
what i want to to achieve is, that all necessary classes are created with the respective values. here is an example:
.button {
&.primary {
border: [border];
color: [color];
&:hover {
border: [border-hover];
color: [color-hover];
}
}
&.secondary {
border: [border];
color: [color];
&:hover {
border: [border-hover];
color: [color-hover];
}
}
}
I'm happy for every useful tip :)
It is actually pretty trivial and straightforward. All you need to do is to use #each loop over your map and extract values using map functions.
.button {
#each $type, $styles in $buttons {
&.#{$type} {
border: map-get($styles, border);
color: map-get($styles, color);
&:hover {
border: map-get($styles, border-hover);
color: map-get($styles, color-hover);
}
}
}
}
I'm using React material-ui SelectField on my page. I'm not able to adjust the height of the select field. Here is my code snippet:
<SelectField
underlineStyle={{
display: 'none'
}}
style={{
width: '49%',
padding: '0 0 5em 5em',
border: '1px solid #ccc',
borderRadius: '5px',
backgroundColor: '#fff',
margin: '16px 0px 0px 28px',
}}
floatingLabelText="Select Stack*"
value={this.state.stack}
onChange={this.handleStackChange.bind(this)}
>
{this.state.dropDownStack}
</SelectField>
My UI is looking as below
I need to reduce the height of dropdown box, how can I do it?
You have to set it using following:
<SelectField
className="custom-selectfield"
underlineStyle={{
visibility: 'hidden',
}}
floatingLabelStyle={{
top: '14px',
}}
style={{
border: '1px solid #ccc',
height: '45px',
}}
floatingLabelText="Select Stack*"
value={this.state.stack}
onChange={this.handleStackChange.bind(this)}>
{this.state.dropDownStack}
</SelectField>
There is some internal CSS applied in material UI so in order to overwrite it added a custom class to SelectPicker component named custom-selectfield
Add following lines in your CSS file
.custom-selectfield > div:nth-child(2) {
margin-top: -6px !important;
}
I have this render and I have notification.isError in props, but I don't know how to use conditional to print a value inside background value, to get different colors accord to the property is Error.
I get "Unexpected token"
render() {
return (
<div style={{ padding: '4px 10px 1px 10px',
fontSize: '16px',
backgroundColor: {return (this.props.notification.isError?'red':'black')},
}}
>
I've tried this too:
const bgcolor = (this.props.notification.isError?'red':'black');
return (
<div style={{ padding: '4px 10px 1px 10px',
backgroundColor: {bgcolor},
}}
but backgroundColor is not showed on the browser; it's like react don't like the way to send the value
Can you try this:
render() {
return (
<div style={{ padding: '4px 10px 1px 10px',
fontSize: '16px',
backgroundColor: (this.props.notification.isError?'red':'black')
}}
>
How can I translate this (LESS):
.urlBox {
background: #ddd;
border-radius: 5px;
padding: 5px;
+ .urlBox {
margin-top: 5px;
}
}
To Styletron?
So far I've got this:
const UrlBox = styled('div', {
background: '#ddd',
borderRadius: '5px',
padding: '5px',
});
But I can't figure out how to do the sibling selector (+).
In JSS we have nested syntax, which is similar to less/sass.