How can I style the scrollbars with JSS? The solution below does not work.
'::-webkit-scrollbar-track': {
background: 'red',
},
'::-webkit-scrollbar': {
width: 10,
background: 'red',
},
'::-webkit-scrollbar-thumb': {
background: 'green',
},
In JSS, pseudo-elements are prefixed with an ampersand. Give the following a try:
'&::-webkit-scrollbar-thumb': {
background: '#888'
}
Related
I'm developing with react and MaterialUI on the front end and I have a bunch of customized inputs. Everything is working pretty well except for this one. No matter what combination of selectors I use I can't seem to point to the right one to change this black color.
Also, it'd be nice to have a clear way to identify just by looking at the element selector, to drill down into the right component. Is there anyway to do this (teach a man to fish kind of thing).Here is the image of the element when I inspect it and the color I'm trying to get at.
here is the style object:
toggleToUse = {
switchBase: {},
thumb: {
color: colorUsedByInputs,
opacity: 0.6,
marginLeft: '10.2px'
},
track: {
background: 'grey',
opacity: '1 !important',
borderRadius: 20,
position: 'relative',
'&:before, &:after': {
display: 'inline-block',
position: 'absolute',
top: '50%',
width: '50%',
transform: 'translateY(-50%)',
color: '#fff',
textAlign: 'center'
}
},
checked: {
'&$switchBase': {
color: '#185a9d',
transform: 'translateX(32px)',
'&:hover': {
backgroundColor: 'rgba(24,90,257,0.08)'
}
},
'& $thumb': {
backgroundColor: '#fff'
},
'& + $track': {
background: 'linear-gradient(to right, rgba(43, 56, 97, 0.7), #2b3861)',
'&:before': {
opacity: 1
},
'&:after': {
opacity: 0
}
}
}
};
Here is the image of the element when I inspect it and the color I'm trying to get at.
<Switch classes={{ track: classes.track }} />
track: {
'.Mui-disabled + &&': {
backgroundColor: 'hotpink',
},
},
This will work for a default MUI Switch. If needed, you can increase the specificity by adding additional & to the selector. If all fails, please provide a codesandbox and precisely state what color you want in which scenario.
I am trying to create a const object, which is supposed to be a button with React inline styling, but :hover and :focus doesn't work. How do I implement hover and focus in React?
Any help is appreciated! Thanks in advance.
const Button= {
background: '#AC003B',
color: '#fff',
borderColor: '#AC003B',
&:hover, &:focus {
background: '#707070',
borderColor: '#707070'
}
}
I believe what you want to do is:
const Button = {
background: '#AC003B',
color: '#fff',
borderColor: '#AC003B',
'&:hover, &:focus': {
background: '#707070',
borderColor: '#707070'
}
}
How can I change placeholder text color with React inline styling? I'm using the following input styling:
input: {
width: '100%',
height: '100%',
backgroundColor: 'white',
border: '0px',
float: 'left',
paddingLeft: '30px',
...
}
You can simply target the placeholder text inside the attribute like so:
input::placeholder {
color: white;
}
There is a single space that sits between the selector and className, so I had to do this to achieve.
Please refer to this, https://github.com/FormidableLabs/radium/issues/712
<Style
scopeSelector=""
rules={{
'.textfield-input::placeholder': { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: 'red',
opacity: 1 /* Firefox */
},
'.textfield-input:-ms-input-placeholder': { /* Internet Explorer 10-11 */
color: 'red',
},
'.textfield-input::-ms-input-placeholder': { /* Microsoft Edge */
color: 'red',
}
}}
/>
I am trying to style reactjs checkbox component using CSS. It uses pseudo-elements :after and :before.
Mock it up on html and css and it worked! Fiddle Link
input[type="checkbox"]#checkbox + label::before {
content: "";
display: inline-block;
vertical-align: -25%;
height: 2ex;
width: 2ex;
background-color: white;
border: 1px solid #c3c4c6;
border-radius: 4px;
margin-right: 0.5em;
}
input[type="checkbox"]#checkbox:checked + label::after {
content: '';
position: absolute;
width: 1.2ex;
height: 0.4ex;
background: rgba(0, 0, 0, 0);
top: 0.5ex;
left: 0.4ex;
border: 3px solid #60cd18;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
But when i tried to implement it on my reactjs component that display checkbox,maybe the :after doesn't work. Fiddle ReactJS Component Link
How should i achieve the same style on ReactJS checkbox component?
There's couple of ways to use pseudo elements on React such as Radium, but afaik it doesn't support :after/:before, instead according to this and this, it suggest creating an element in place of the pseudo-elements. I didn't find any React example of this and i think the availability of pseudo elements was to avoid creating unnecessary DOM elements.
With all that limitations, my current solution for customising the checkbox in react so that it works on most browsers was to create an element that acts,looks, and feel like a checkbox(imposter), but not a checkbox by itself (input type="checkbox"). I achieved this by using ReactJS to trigger the visibility of the span element and font-awesome icon.
Example
/* html */
<div id="container">
</div>
/* JS */
var Checkbox = React.createClass({
getDefaultProps: function() {
return {
value: true,
name: '',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: '#c3c4c6',
borderRadius: '4px',
checkColor: '#60cd18',
height: '1px',
width: '',
namePaddingLeft: '10px',
namePaddingRight: ''
};
},
render: function() {
var style = {
boxStyle: {
borderWidth: this.props.borderWidth,
borderStyle: this.props.borderStyle,
borderColor: this.props.borderColor,
borderRadius: this.props.borderRadius,
paddingLeft: this.props.width,
paddingRight: this.props.width,
paddingTop: this.props.height,
paddingBottom: this.props.height
},
show: {
visibility: 'visible',
color: this.props.checkColor
},
hidden: {
visibility: 'hidden',
color: this.props.checkColor
},
name: {
paddingLeft: this.props.namePaddingLeft,
paddingRight: this.props.namePaddingRight
}
};
return (
<div>
<span style={style.boxStyle}>
<i className="fa fa-check fa-lg" style={(this.props.value) ? style.show : style.hidden}></i>
</span>
<span style={style.name}>{this.props.name}</span>
</div>
);
}
});
var WrapperCheckbox = React.createClass({
getInitialState: function(){
return {value: false}
},
handleClick: function(){
console.log('Click Fires!');
this.setState({value: !this.state.value});
},
render: function(){
return (
<div onClick={this.handleClick}>
<Checkbox name='Reserve Guarantee' value={this.state.value}/>
</div>
);
}
});
React.render(<WrapperCheckbox />, document.getElementById('container'));
I am new to sencha touch.
How do we change the background color of a button to white? I have a button with two images in each corner. I want the button to be plain white.
I tried using css like this:
.quest {
background: url(../images/quest.jpg) no-repeat left,
url(../images/rightarrow.jpg) no-repeat right;
background-color: white;
border: none;
border-color:white;
padding-left: 50px;
text-align: left;
}
My button is here:
{
xtype: 'button',
text: '<div class="quest">Info</div>',
labelWidth: '100%',
name: '',
handler: function() {
}
}
My button has grey borders (Grey default button color in sencha) with white color in mid. How do i make it completely white? Please help.
I have even tried:
style: "background-color: white"
Using 'cls' attribute solved my problem.
{
xtype: 'button',
cls: 'btn',
text: '<div class="person">People</div>',
labelWidth: '100%',
},
In my app.css define
.btn
{
background-color: white !important;
background-image: none;
}
We have to redefine both background-color and background-image properties so that the default sencha-touch.css properties are overridden. Thank you Thiem Nguyen for your help.
This should render your desired button :)
config: {
ui: 'plain',
text: 'Your Text',
style: 'background-color:white;'
}
Just like Thiem Nguyen said, this will work
{
xtype:'button',
text:'text',
ui:'plain',
style:'background-color:white'
}