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
Related
I created a style object in react that I will pass through a style prop:
const iconStyle = {
color: "#464545",
fontSize: "24px",
margin: "20px",
transitionProperty: "color",
transitionDuration: "1s",
}
Any idea on how I could add a hover selector inside of it, because I've looked around and I still have no clue.
probably this pseudo selector will help.
const iconStyle = {
color: "#464545",
fontSize: "24px",
margin: "20px",
transitionProperty: "color",
transitionDuration: "1s",
"&:hover": {
background: "#efefef"
},
}
In React.js there is no such way hover.
You can accomplish your goal with these two states.
onMouseEnter={() => this.setState({hover: true})}
onMouseLeave={() => this.setState({hover: false})}
And you can use "hover" state(for example) to specify styles like
style = this.state.hover ? style1 : style2
Hope this helps you to understand!
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
I want to increase the font size for the pagination part of the material table footer.
In the below image, I am able to change the font size of rows per page with the below code
[1]: https://i.stack.imgur.com/cjNmp.png
components={{
Pagination: props => (
<TablePagination
{...props}
SelectProps={{
style:{
fontSize: 20
}
}}
/>
)
}}
but still unable to change increase size of the whole underlined part
I styled both caption area using two different methods: One via toolbar styles and the other directly:
There is two parts in the results per page component and are a p by default
import makeStyles from "#material-ui/core/styles/makeStyles";
const useStyles = makeStyles({
caption: {
color: "green",
padding: 8,
border: "1px dashed grey",
fontSize: "0.875rem"
},
toolbar: {
"& > p:nth-of-type(2)": {
fontSize: "1.25rem",
color: "red",
fontWeight: 600
}
}
});
// then later
const classes = useStyles();
<TablePagination
// ...
classes={{
toolbar: classes.toolbar,
caption: classes.caption
}}
/>
Here is a codesandbox demo
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>
How can I override the default value of the max-height property for the Popover component?
I tried to add style={{'maxHeight': '365px'}}, but nothing is changed:
<Popover
style={{'maxHeight': '365px'}}
className='notif-popover'
open={this.state.notifOpen}
anchorEl={this.state.anchorEl}
anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
onRequestClose={this.handleRequestClose}
>
The only props that apply style are:
className string of classes and style object with styles.
Remember that these are applied to the root element (the Modal component).
Docs SourceCode (if you're using v1-beta). You can see in the sources that the remaining props are passed to the Modal component
const {
anchorEl,
anchorReference,
anchorPosition,
anchorOrigin,
children,
classes,
elevation,
getContentAnchorEl,
marginThreshold,
onEnter,
onEntering,
onEntered,
onExit,
onExiting,
onExited,
open,
PaperProps,
role,
transformOrigin,
transitionClasses,
transitionDuration,
...other
} = this.props;
<Modal show={open} BackdropInvisible {...other}>
You can see in the sources that MaterialUI uses the withStyles HoC from react-jss and has a styles object for the Paper component
export const styles = {
paper: {
position: 'absolute',
overflowY: 'auto',
overflowX: 'hidden',
// So we see the popover when it's empty.
// It's most likely on issue on userland.
minWidth: 16,
minHeight: 16,
maxWidth: 'calc(100vw - 32px)',
maxHeight: 'calc(100vh - 32px)'
maxHeight: 'calc(100vh - 32px)'
This is bound to a class paper and then passed to the classes prop and applied to the Paper component.
Solution:
Use the className prop on the root element with nested selector that targets the Paper component (inspect and see on which element it applies the class).
Example of possible selector (should definitely use a better one, inspect element)
.rootElement > * { max-height: '375px' }
and then you'd do <Popover className='rootElement' />
You should really override the style while building the theme...
createMuiTheme({
overrides: {
MuiTooltip: {
tooltip: {
fontSize: '1rem',
backgroundColor: '#000',
}
}
}
})
This CSS override seems to work for me:
.writeYourOwnClasHere {
.MuiPaper-root-6 {
padding: 30px;
color: pink;
}
}
Btw, it's an unbelievably crappy API.