I've tried to set the border-radius like this :
const styles = {
btn:{
height: 30,
fontSize: 11,
borderRadius: 50
}
}
It didn't work. I've read the documentation but can't find the answer.
Update (June 2020)
With the newer versions of material-ui, there no need for both props style and buttonStyle only style will be enough also, RaisedButton has been dropped with the migration from 0.x to 1.x being replaced now by variant="contained".
Here is a modern version of the code in the original answer
<Button variant="contained" color="secondary" style={{ borderRadius: 50 }}/>
https://codesandbox.io/s/rounded-raised-button-w86o8?file=/index.js:0-361
Original Answer (April 2018)
This works for me
<RaisedButton secondary buttonStyle={{ borderRadius: 50 }} style={{borderRadius:50}}>FF</RaisedButton>
Give both the style and buttonStyle. style covers the parent div inline styles
https://codesandbox.io/s/7o39499v9x
for mui v5 you do it with the sx property:
<Button sx={{ borderRadius: 12.5 }} />
The borderRadius properties multiples the value it receives by the theme.shape.borderRadius.
const theme = createTheme({
shape: {
borderRadius: 2, // defaults to 4
},
palette: {...},
});
Related
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 use the react-router-dom to create my routes because this has use component Link in my menu, but I want to custom that component. I have customing with const and Work, but my hover does't work.
My code:
<Link className="ui-link" style={styles.menuStyle} to={'/home'}>
<MdStore size={25} color="#5f5f5f" />
<Opt>Consumidores</Opt>
</Link>
My CSS, but my hover does't work:
const styles = {
menuStyle: {
textDecoration: 'none',
display: 'flex',
alignItems: 'center',
padding: '10px',
borderRadius: '8px',
margin: '5px 0px',
'&:hover': {
backgroundColor: '#171717',
},
},
};
why do not use the className="ui-link" and create a style to class?
For example:
a.ui-link:hover {
backgroundColor: '#171717';
}
I'm not really sure if you can do it like that, You can do one of the following:
Use styled components there you can simply style your Link tag with
whichever styles you want with pure css code
Use mouseEnter, mouseLeave events
Style it the regular way you would
Is there a clear/easy way to control Tooltip's distance from the anchor element? The default positioning does not fit well for my case, the tooltip is too close to the anchor. I have checked all the props of it and PopperProps no visible option to do that.
You can customize the tooltip's margin using withStyles.
In my case (Material-UI 3), the tooltip was too far away from the anchor.
Here is what I needed :
const StyledTooltip = withStyles({
tooltipPlacementTop: {
margin: "4px 0",
},
})(Tooltip);
I targeted tooltipPlacementTop because it was the rule name when using the placement="top" prop.
You can find the adequate rule names in the Tooltip API documentation.
Last tip: I used the PopperProps={{ keepMounted: true }} prop to see in my navigator's inspector what CSS was applied to the tooltip.
Hope it helps.
For Material-UI V.5 it could be done like this:
<Tooltip
PopperProps={{
modifiers: [
{
name: "offset",
options: {
offset: [50, 0],
},
},
],
}}
.......
Follow up with Hugo's suggestion, since the tooltip position is absolute, instead of changing the margin I changed the anchor position by adjusting the properties right and top like so:
const StyledTooltip = withStyles({
tooltipPlacementTop: {
right: "1px",
top: "8px",
},
})(Tooltip);
It works as I expected. You can use left or right to adjust the tooltip horizontal position accordingly.
I was using material ui styled to adjust my tooltip properties. I used the normal theme which is available in the MUI documentation.
const LightTooltip = styled(({ className, ...props }) => (
<Tooltip {...props} classes={{ popper: className }} />))(({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11
},}));
I tried to adjust the position property with Mui styled, but it wasn't working.
I fixed it with my external style sheet.
.MuiTooltip-popper {
inset: -25px auto 0px auto;}
In Material-UI v4, you can add margin via style prop in the PopperProps.
<Tooltip
placement="bottom"
title="hello"
PopperProps={{ style: { marginTop: -12 } }}
>
<div>Some text</div>
</Tooltip>
I'm using Material-UI 4.x version and changed tooltip distance from the anchor using following style
const HtmlTooltip = withStyles(theme => ({
arrow: {
'&::before': {
color: 'white'
}
},
tooltip: {
backgroundColor: '#f5f5f9',
boxShadow: theme.shadows[8],
color: 'rgba(0, 0, 0, 0.87)',
fontSize: 14,
maxWidth: 800,
padding: 0,
},
tooltipPlacementTop: { // this part will change the distance
margin: '4px 0',
},
}))(Tooltip)
you can set it through the style prop
<Tooltip style={{ padding: '4px 0'}} > {children} </Tooltip>
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
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 }}
/>