I tried to add style to RaisedButton,but it doesn't work,and
<RaisedButton type="submit" label="Submit" style={{container:{borderRadius: "5px"}}} primary/>
And I also look this question,and still doesn't help:
<RaisedButton label="raised button" className="raised-button--rounded" />
.raised-button--rounded,
.raised-button--rounded button {
border-radius: 25px; /* assuming one is not already defined */
}
My expected result is like this
I want to make a rounded textfield and button.Can anyone give me some advice to help me with this.
Any help would be great appreciate!
Here are the properties I used to copy that button style:
<RaisedButton
label="Submit"
buttonStyle={{ borderRadius: 25 }}
style={{ borderRadius: 25 }}
labelColor={'#FFFFFF'}
backgroundColor={"#0066e8"}
/>
label: button label
buttonStyle: shapes the portion that has the background
style: shapes the underlying root element
labelColor: changes the font color to white
backgroundColor: changes the background color to dodger-blue
Gif of button with properties mentioned above:
TextField:
<TextField
underlineShow={false}
color="white"
type={'password'}
value={'Foo'}
inputStyle={{color: 'white', padding: '0 25px'}}
style={{ backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: 25 }}
/>
Related
I have already tried setting the background color using the style prop provided by AceEditor but that only works for the body. How can I change the background color of the left pane that has the line numbers to transparent too?
<AceEditor
mode="javascript"
theme="dreamweaver"
// onChange={onChange}
style={{
backgroundColor: "transparent",
fontSize: "1.2rem",
color: "white",
}}
name="UNIQUE_ID_OF_DIV"
editorProps={{ $blockScrolling: true }}
value={`function onLoad(editor) {
console.log("i've loaded");
}
`}
/>
In a non-React-specific way, you could change the line number panel ("gutter") background with CSS like so
.ace-tm .ace_gutter {
background: #F8F8F8;
}
I need to change my dropdown hover to green. I tried inline CSS and makeStyle(), But non of these are not working for me. I have no idea to change this hover color. If anyone can help me with this, I really appreciate it.
I need to change this hover color into green.
This is my code:-
<Select
className={dropDowStyle.select}
style={{
borderRadius: '8px', marginLeft: '-150px',
width: '163px', height: '45px', fontSize: '15px',
backgroundColor: "transparent",borderColor:primaryColor + "88"
}}
sx={{width: 163}}
// defaultValue=""
input={<OutlinedInput style={{borderColor: primaryColor + "88",}}/>}
displayEmpty
value={city}
renderValue={(value) => {
return (
<Box sx={{display: "flex", gap: 2.5}}>
<SvgIcon style={{fontSize: '20px'}}>
<LocationOnIcon/>
</SvgIcon>
{renderLocation && value}
</Box>
);
}}
onChange={cityValueHandler}
>
{shopLocation.map((option) => (
<MenuItem key={option.gg} value={option.gg}>
{option.gg}
</MenuItem>
))}
</Select>
The container of the menu list is a Paper which is part of the Menu (the dropdown of the Select). You can target the props of the nested component like below. See here for the list of Menu classNames. Also have a look at all classNames for the component states.
<Select
// to override the border color of the Select input
sx={{
"&:hover": {
"&& fieldset": {
border: "3px solid green"
}
}
}}
// to override the color of the dropdown container
MenuProps={{
PaperProps: {
sx: {
"& .MuiMenuItem-root.Mui-selected": {
backgroundColor: "yellow"
},
"& .MuiMenuItem-root:hover": {
backgroundColor: "pink"
},
"& .MuiMenuItem-root.Mui-selected:hover": {
backgroundColor: "red"
}
}
}
}}
Live Demo
You can use inputProps of Select and set the sx prop like this:
<Select
inputProps={{
sx: {
"&.MuiOutlinedInput-input:hover": {
border: "2px solid green"
}
}
}}
>
Just inspect the element you want to apply hover CSS.
https://mui.com/customization/how-to-customize/#overriding-nested-component-styles
For example find MuiSlider-thumb in the elements and try to apply on, discard the hash value in front
.MuiSlider-thumb:hover {
color:green;
}
or background to green.
Be careful as this might override all of the selects in your code base, so it might not be the best solution.
My UI look like this
I am doing my Reactjs project and dueling with the material ui Textfield.
I used
const styles = theme => ({
input: {
width: 30,
height:30,
marginTop:10,
fontSize:7,
padding:0,
},
})
to style my Textfield which code is
<span>Size </span>
<span style={{marginTop:'10px'}}>
<TextField
InputProps={{
className: classes.input
}}
variant="outlined" />
</span>
But because the size of my textfield is small, my text can be shown within the border. I think the reason is that the distance between the border and text is too large. Is there any way to shorten the distance? Or any solution to help me show the text in my textfield.I tried padding, but it does not work.
Any answer would be appreciated. Thanks so much!
The InputProps className prop is targeting the wrapper of the input if you want to modify the padding of the actual input, do this
inputWrapper: {
width: 30,
height: 30,
marginTop: 10,
fontSize: 7,
"& input": {
padding: 0
}
}
<TextField
InputProps={{
className: classes.inputWrapper
}}
variant="outlined" />
I'm trying to figure out how use the Material UI v1 stepper in react, with my own font sizing.
The standard example imposes font sizing at this span class: MuiTypography-body1-99
I've tried adding fontSize properties to the label and MuiTypography classes in the const:
const styles = theme => ({
root: {
width: '80%',
marginLeft: '10%',
marginTop: '50px',
},
button: {
marginTop: theme.spacing.unit,
marginRight: theme.spacing.unit,
},
actionsContainer: {
marginBottom: theme.spacing.unit * 2,
},
resetContainer: {
padding: theme.spacing.unit * 3,
},
label: {
fontSize: '50%',
},
Typography: {
fontSize: '87%',
}
I can't add a class to the const styles with the name of the class in the UI theme, because the hyphen isn't recognised.
I can't add a fontSize attribute directly to the Typography and content elements on the page, (it gives an error saying fontSize is undefined).
<StepContent fontSize='120%'>
<Typography fontSize='120%'>{getStepContent(index)}</Typography>
How do you set a fontSize with the stepper?
if I understand your question correctly, you'd like to set the Stepper font-size so that the StepLabel or StepContent have a specific font-size.
This can be done by utilizing the style property that both the StepLabel and StepContent components have.
For example:
<Stepper>
<Step>
<StepLabel
style={{ fontSize: '150%', color: '#f00' }}
>
Create an ad
</StepLabel>
<StepContent
style={{ fontSize: '120%', color: 'hotpink' }}
>
<p>
For each ad campaign that you create, you can control how much
you're willing to spend on clicks and conversions, which networks
and geographical locations you want your ads to show on, and more.
</p>
</StepContent>
</Step>
</Stepper>
Hope that answers your question
By adding the style attribute I can only change the color of the body part of the Card component. How can I change the title part as well?
<Card title='Card title' bordered loading={this.onLoading()}
style={{ backgroundColor: '#aaaaaa' }}>
<Row type='flex' justify='center'>
<h1>Card content</h1>
</Row>
</Card>
The following worked for me. I had to remove the background color of the entire card and set a different background color both for the Head and Body content:
<Card
title="Track title"
style={{backgroundColor: 'rgba(255, 255, 255, 0.0)', border: 0 }}
headStyle={{backgroundColor: 'rgba(255, 255, 255, 0.4)', border: 0 }}
bodyStyle={{backgroundColor: 'rgba(255, 0, 0, 0.4)', border: 0 }}
>
<Card.Meta
description="Track author"
/>
</Card>
Result:
Hope it helps!
Finally i have no choice and use css to get around that. The structure of the antd card is like
<div class="ant-card ant-card-bordered">
<div class="ant-card-head" \>
<div class="ant-card-body" \>
and .ant-card-head has the background style as #fff.
if I do sth like <Card style={{background:"#aaa"}}, it will override the .ant-card class. If I do <Card bodyStyle={{background:"#aaa"}}, it will override the .ant-card-body class and I couldn't find any direct way to override the .ant-card-head class, so I ended up use css to set the .ant-card-body background to none and it works.
For antd version 4.x
You can use headStyle and bodyStyle property to change the background color
<Card
title="Card title"
headStyle={{ backgroundColor: '#5c6cfa', color: '#ffffff' }}
bodyStyle={{ backgroundColor: '#a9bbff' }}
bordered={false}
style={{ width: 300 }}
>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
OR
You can customize the css class
.ant-card-head {
background: #5c6cfa;
color: #ffffff;
}
.ant-card-body {
background: #a9bbff;
}
Screenshot:
You have some typo. style:{{backgroundColor:'#aaaaaa'}} should be style={{ backgroundColor: '#aaaaaa' }} and it works for me:
Using the same code and it does work:
I may need to inspect your page to know why it doesn't work for you