I have the below component using material-ui 1.0.0-beta 31. The typography styles do not display on the page and all of the text has the same styling. Could someone explain what I've done wrong, please?
import React from 'react';
import Typography from 'material-ui/Typography';
const LearningPage = (props, { authUser }) =>
<div>
<Typography variant="headline" component="h2">
benevent
</Typography>
<Typography >adjective</Typography>
<Typography component="p">
well meaning and kindly.<br />
{'"a benevolent smile"'}
</Typography>
<Typography variant="headline" gutterBottom>
Headline
</Typography>
</div>
export default LearningPage;
The variant prop does not exist in material-ui 1.0.0-beta 31. As specified in the release notes, the variant prop was introduced in beta 32.
Prior to beta 32, the type prop had the same role as the variant prop. Here's the commit where the change was made, and here's the issue where the change is discussed, if you're interested.
So, you have two options to fix this problem:
Upgrade to beta 32.
Stay at beta 31 and rename variant to type.
I had the exact same problem on material-ui#1.0.0-beta.31. Updating the material-ui to 1.0.0-beta.32 fixed the problem. Just run:
npm install --save material-ui#next
Related
Basically what I am trying to display is I am Python, Javascript and Flutter developer. string. But it looks this way:
With the following component in react:
<Typography gutterBottom variant="h6">
I am <HL>Python</HL>, <HL>Javascript</HL> and <HL>Flutter</HL> developer.
</Typography>
With HL component I basically am applying a few stylings to texts, how would I go translating that with next-translate? My best try is:
<Typography gutterBottom variant="h6">
{t("introduction2", {
langs: [
<HL>Python</HL>,
<HL>JavaScript</HL>,
<HL>Flutter</HL>,
]
})}
</Typography>
With:
{
...
"introduction2": "I am {{langs[0]}}, {{langs[1]}} and {{langs[2]}} developer.",
...
}
Also tried with:
{
...
"introduction2": "I am {{langs.0}}, {{langs.1}} and {{langs.2}} developer.",
...
}
And also tried with renderToString on HL components but it does not behave how you may expect as I use Next.JS to render the page, it messes up theme settings provided by mui.
EDIT
Solved it by using Trans component mentioned by #adrai, but the solution differed a bit so here is the last form:
import Trans from "next-translate/Trans";
...
<Typography gutterBottom variant="h6">
<Trans i18nKey="common:introduction2" components={[<HL />]}>
I am <HL>Python</HL>, <HL>Javascript</HL> and <HL>Flutter</HL> developer.
</Trans>
</Typography>
With:
{
...
"introduction2": "I am <0>Python</0>, <0>Javascript</0> and <0>Flutter</0> developer.",
...
}
Use the Trans Component: https://react.i18next.com/latest/trans-component
<Typography gutterBottom variant="h6">
<Trans i18nKey="myKey">I am <HL>Python</HL>, <HL>Javascript</HL> and <HL>Flutter</HL> developer.</Trans>
</Typography>
And in the translation string use the <1>Python</1> tags…
"myKey": "I am <1>Python</1>, <3>Javascript</3> and <5>Flutter</5> developer."
I wanna use styled-system in my project which is the admin panel. I built project basing on React Material and I have a lot of different forms with inputs, selects, checkboxes and so on. In many places I have to set some margins/paddings for elements and I make this moment with some custom Box component, that uses styled-system functions (space, color, etc). But it the end I got a rather cumbersome structure something like this :
<Box>
<Box mb={10}>
<Box mr={2}><TextField/></Box>
<Box mr={2}><TextField/></Box>
<Box mr={2}><TextField/></Box>
</Box>
<Box>
<Box mr={2}><Select/></Box>
<Box mr={2}><Select/></Box>
<Box mr={2}><Select/></Box>
</Box>
</Box>
And it's just a little part of the component. I think, in this situation it would be good to create some wrapper around TextField/Select components which will add styled-system functions to components.
And then use them like :
<Box>
<Box mb={10}>
<TextField mr={2}/>
<TextField mr={2}/>
<TextField mr={2}/>
</Box>
<Box>
<Select mr={2}/>
<Select mr={2}/>
<Select mr={2}/>
</Box>
</Box>
But then I understand that react-material has a lot of components and what I have to do? Override all of them to have some similar style? Or what way can be more comfortable?
So what you are asking for can definitely be achieved without adding that much noise to the markup.
First off, the styled markup works for all material-ui components. Luckily, styled-system is ALSO interoperable with styled-components. So you can do this
const StyledButton = styled(TextField)`
color: red;
// to access theme in a styled-system way
${get("mt", 3)};
`;
That accessor called get is a little unique, it comes from this package. It allows you to use all the styled-system flavoured keys inside of a styled-component.
If you wanted inline props for all the material components, like you described, its a little more involved. You would need to wrap each component with the proper decorators that enable such inline props. Creating basically a shadow library.
import styled from 'styled-components';
import { variant, space, layout, position } from 'styled-system';
export default styled(TextField)(
position,
layout,
space,
// whatever else
);
Check out the official build-a-box tutorial for better insight.
I started a project with react-splitter-layout and material ui library.
I would like to find a way to create responsive components, with material ui Grid or Box component
I encounter a problem with responsive, I would like my left panel to be responsive (use of xs / md / lg) with Grid component based on the size of the container (not window size), as you can see in the example below , this is not the case. It's use the viewport size. (I know it's normal because of media queries).
Here the code sample : https://codesandbox.io/s/material-demo-i04rr?file=/demo.js (recommended to open the rendering in a new tab to see the problem)
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Paper from "#material-ui/core/Paper";
import Grid from "#material-ui/core/Grid";
import SplitterLayout from "react-splitter-layout";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
}
}));
export default function CenteredGrid() {
const classes = useStyles();
return (
<SplitterLayout>
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={4} md={6} lg={8}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
<Grid item xs={4} md={4} lg={2}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
<Grid item xs={4} md={2} lg={2}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
</Grid>
</div>
<div>Panel 2</div>
</SplitterLayout>
);
}
Anyone have a solution to this problem ?
Best regards,
EDIT
I also posted in material ui github https://github.com/mui-org/material-ui/issues/25189
This is one of my question when I started using material-UI or any CSS framework.
Material-UI currently supports almost cases you need especially for responsive, and I never use any other library/framework for responsive. First, you know that all xs, sm, md are based on screen size, not on their container.
Then, the problem here is how did you called a "container"? When you work with material-UI, you should layout everything based on screen size instead of a specific container. Because your "container" you are think about doesn't have any meaning in responsive. It just help you solve the layout problem.
To be honest, just change your mind, thinking in the way of Material-UI, and everything about responsive become easily.
Could you please tell me Why header show blue color ? I already try to change theme colour but it not work .I am expecting “Red” color
using from this link
https://material-ui.com/demos/app-bar/
here is my code
https://codesandbox.io/s/7191w73nxx
<div className="App">
<MuiThemeProvider muiTheme={theme}>
<AppBar position="static" color="primary" className="app-header">
<Toolbar>
<Typography variant="h6" color="inherit">
Photos
</Typography>
</Toolbar>
</AppBar>
</MuiThemeProvider>
</div>
For <MuiThemeProvider>, you are passing the prop muiTheme={theme}. This is incorrect. You should be using prop theme, like so:
<MuiThemeProvider theme={theme}>
Your code sandbox, after a quick edit to the prop name, looked like this:
The Material-UI Themes documentation shows some helpful examples, where you can view the source code to see how to use them in your React app.
Here is the updated code. https://codesandbox.io/s/w0xrmpy1m8
Only mistake was <MuiThemeProvider theme={theme}>
expected theme for props instead of
muiTheme which you had provided
I've this textbox:
<Typography component="p" className={classes.text}>
{this.props.post.text}
</Typography>
I'd like to be able to include paragraphs but all text entered into it gets printed on one line.
The documentation suggests that paragraph is defaulted to false so I must set it to `true.
I've tried the following:
<Typography component="p" className={classes.text} paragraph="true">
I also tried:
<Typography component="p" className={classes.text} paragraph={true}>
Neither work so all my text still gets printed to one line.
How do I get the paragraphs to show?
Additional info:
As I now understand, the paragraph={true} attribute in Typography just adds a bottom-margin to the whole text. I.E. my one block of text is a paragraph. If I want another paragraph I would have to add another Typography. Something like:
<Typography component="p" className={classes.text} paragraph={true}>
{this.props.post.text}
</Typography>
<Typography component="p" className={classes.text} paragraph={true}>
{this.props.post.text2}
</Typography>
This is not exactly what I want. Perhaps what I should be aiming for is to have the return characters in my input text recognised. Is this correct and if so, how is it done?
I tried this:
<pre>
<Typography component="p" className={classes.text}>
{this.props.post.text}
</Typography>
</pre>
The tag preservers the whitespace and line breaks inside the tags as is.
This is not suitable though. If I have long line the text does not wrap at the Card width. Instead anything beyond the width of the card becomes truncated. Clearly I want it all. I want my text to wrap in the card and also for it to support new lines and paragraphs. How is this done?
A better way is to use power of css:
white-space: pre-line
"New line" character will be respected if you use this css property.
Edit: Help from Ionut-Alexandru Baltariu
<Typography id="modal-description" sx={{ whiteSpace: 'pre-line'}}>
For new paragraphs
<Typography>
{this.props.text.split("\n").map((i, key) => {
return <p key={key}>{i}</p>;
})}
</Typography>
For just new lines
<Typography>
{this.props.text.split("\n").map((i, key) => {
return <div key={key}>{i}</div>;
})}
</Typography>
I tried your answer and it worked perfectly as needed. However, the console returns a minor error
Warning: validateDOMNesting(...): <p> cannot appear as a descendant
of <p>.
I improved on your answer slightly by replacing the <p> tags in your .map() with <Typography> and wrapping it all in a <div> instead, like so:
<div className={classes.text}>
{this.props.post.text.split('\n').map((i, key) => {
return <Typography key={key} paragraph variant="body1">{i}</Typography>;
})}
</div>
(you can replace body1 with whichever variant you want!)
This seems to get rid of the warning for me and I hope works as you intended.
I've come up with this:
<Typography component="p" className={classes.text}>
{this.props.post.text.split("\n").map((i, key) => {
return <p key={key}>{i}</p>;
})}
</Typography>
If there is a better way to do this I'd be keen to hear it.
This really is a strange behavior. From what I can tell, you are doing everything correctly. p is by itself displayed as block element so it should be by default displayed the way you want it to be. But, it could be that you are overriding that in your .text css class. Try to see if there is you problem. If not, you can always use variant property variant="headline" in order to put them on new lines.
If I get this right, you could simply leverage the power of HTML and add <br />-elements, to insert line-breaks.
This worked for me:
<Typography component="pre">
{this.props.post.text}
</Typography>
Starting in Material UI V5 you can now access many CSS utilities as props. For whitespace, you can now do:
<Typography whiteSpace="pre-line">{this.props.post.text}</Typography>