I want to build WordPress plugin admin manager screen by MUI, but I find a problem about CSS specificity.
Here it is normal:
enter image description here
But the fact is that:
enter image description here
My code:
import React from 'react';
import ReactDOM from 'react-dom/client';
import Paper from '#mui/material/Paper';
import FormGroup from "#mui/material/FormGroup";
import TextField from '#mui/material/TextField';
import Typography from '#mui/material/Typography';
import Button from "#mui/material/Button";
import Box from "#mui/material/Box";
import StyledEngineProvider from "#mui/material/StyledEngineProvider";
const root = ReactDOM.createRoot(document.getElementById('wpbody'));
root.render(
<Paper sx={{padding: 3}}>
<Typography sx={{padding: 1}}>基础设置</Typography>
<FormGroup sx={{maxWidth: 300}}>
<TextField id="standard-basic" label="App ID" variant={"filled"} sx={{margin: 1}}/>
<TextField id="standard-basic" label="App Secret" variant={"filled"} sx={{margin: 1}}/>
<Box>
<Button variant={"contained"} sx={{margin: 1}}>保存</Button>
</Box>
</FormGroup>
</Paper>
);
Related
https://codesandbox.io/s/react-mui-forked-fpt0xl?file=/index.js
I'm trying to create a simple draggable dialog as shown above. The issue I'm having is that the label for the datepicker element is being cut off for some reason. I understand that I could style my way out of this, but I am trying to understand why the default stylings for MUI lead to this odd behavior. Full code for this component included below, working example demonstrating the problem above.
import * as React from 'react';
import Button from '#mui/material/Button';
import Dialog from '#mui/material/Dialog';
import DialogActions from '#mui/material/DialogActions';
import DialogContent from '#mui/material/DialogContent';
import { AdapterLuxon } from '#mui/x-date-pickers/AdapterLuxon';
import { DesktopDatePicker } from '#mui/x-date-pickers';
import { LocalizationProvider } from '#mui/x-date-pickers';
import { FormControl, InputLabel, Input, FormHelperText } from '#mui/material';
import DialogTitle from '#mui/material/DialogTitle';
import Paper, { PaperProps } from '#mui/material/Paper';
import Draggable from 'react-draggable';
import TextField from '#mui/material/TextField';
import { DateTime } from 'luxon';
function PaperComponent(props: PaperProps) {
return (
<Draggable
handle="#draggable-dialog-title"
cancel={'[class*="MuiDialogContent-root"]'}
>
<Paper {...props} />
</Draggable>
);
}
export default function DraggableDialog() {
const [postDate, setPostDate] = React.useState<DateTime | null>(
DateTime.now()
);
return (
<Dialog
open={true}
onClose={() => {}}
PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog-title"
>
<DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
Add Story
</DialogTitle>
<DialogContent>
<FormControl>
<InputLabel htmlFor="story-title">Title</InputLabel>
<Input id="story-title" aria-describedby="story-title-text" />
<FormHelperText id="story-title-text">Enter title</FormHelperText>
</FormControl>
<LocalizationProvider dateAdapter={AdapterLuxon}>
<DesktopDatePicker
label="Date"
renderInput={(props) => <TextField {...props} />}
value={postDate}
onChange={(newValue: DateTime | null) => {
setPostDate(newValue);
}}
/>
</LocalizationProvider>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={() => {}}>
Cancel
</Button>
<Button onClick={() => {}}>Add Story</Button>
</DialogActions>
</Dialog>
);
}
https://github.com/mui/material-ui/issues/34113
I raised this issue with the MUI team after realizing that the culprit code is something that assigns the first child of most containers (like DialogContent) a margin: 0 property. The label, in this example works by animating its position into that margin area, which for every other element is either 1.0 or 1.5em for the top, but for the first it isn't- it's 0. The recommendation from the repo managers was to style the first element with a local sx={{margin-top: 1.5}} as changing the default behavior would likely break many other designs and this isn't too intrusive.
I'd like to display inline the Autocomplete component, either alonside other Autocomplete components and/or any other React MUI components.
Starting from the example about countries from the doc:
In index.js my first attempt was the following:
import * as React from "react";
import ReactDOM from "react-dom/client";
import { StyledEngineProvider } from "#mui/material/styles";
import Demo from "./demo";
import TextField from "#mui/material/TextField";
ReactDOM.createRoot(document.querySelector("#root")).render(
<StyledEngineProvider injectFirst>
<Demo />
<Demo />
<TextField />
<TextField />
</StyledEngineProvider>
);
with this outcome:
As you can see, while a component like TextField is automatically displayed inline, we cannot say the same thing for Autocomplete.
So, my second attempt was to force the inline property by a Box as shown in the doc:
import * as React from "react";
import ReactDOM from "react-dom/client";
import { StyledEngineProvider } from "#mui/material/styles";
import Demo from "./demo";
import TextField from "#mui/material/TextField";
import Box from '#mui/material/Box';
ReactDOM.createRoot(document.querySelector("#root")).render(
<StyledEngineProvider injectFirst>
<Box component="div" sx={{ display: 'inline' }}><Demo /></Box>
<Box component="div" sx={{ display: 'inline' }}><Demo /></Box>
<TextField />
<TextField />
</StyledEngineProvider>
);
Result: even in this case nothing changed.
I cannot figure out what is wrong. Am I missing something?
You may give a try to Stack Component available in doc.
<Stack direction="row" spacing={2}>
<Demo />
<Demo />
</Stack>
Edit:
I have looked at your Demo.js and found this solution. It may help you.
Adding this line in <Autocomplete>
sx={{display : 'inline-flex', width : '50%' }}
may solve your problem as it does in sandbox.
Here's sandbox.
Also width may cause problem.
So I'm following a react tutorial and in that project material-ui is being used, it's e-commerce, so I have Products.jsx and Product.jsx files.
Product.jsx file:
import React from 'react';
import { Card, CardMedia, CardContent, CardActions, Typography, IconButton} from '#material-ui/core';
import { AddShoppingCart } from '#material-ui/icons';
import MuiThemeProvider from '#material-ui/core/styles/MuiThemeProvider';
const Product = ( {product} ) => {
return (
<MuiThemeProvider>
<Card className="rootie">
<CardMedia className="media" image='' title={product.name} />
<CardContent>
<div className="cardContent">
<Typography variant="h5" gutterBottom>
{product.name}
</Typography>
<Typography variant="h5" gutterBottom>
{product.price}
</Typography>
</div>
<Typography variant="h2" color="textSecondary">{product.description}</Typography>
</CardContent>
<CardActions disableSpacing className="cardActions">
<IconButton aria-label="Add to cart">
<AddShoppingCart/>
</IconButton>
</CardActions>
</Card>
</MuiThemeProvider>
);
}
export default Product;
Products.jsx:
import React from 'react';
import { Grid } from '#material-ui/core';
import Product from '../Product/Product';
import MuiThemeProvider from '#material-ui/core/styles/MuiThemeProvider';
const products = [
{ id: 1, name: 'JBL', description: 'JBL', price: '$100'},
{ id: 2, name: 'AirPods', description: 'AirPods', price: '$100'},
];
const Products = () => {
return (
<MuiThemeProvider>
<Grid container justifyContent="center" spacing={4}>
{products.map((product) =>{
<Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
<Product product={product}/>
</Grid>
})}
</Grid>
</MuiThemeProvider>
);
}
export default Products;
And my App.js looks like this:
import React from 'react';
import Header from './components/Header/Header';
import Products from './components/Products/Products';
import './App.scss';
const App = () => {
return (
<div>
<Products/>
</div>
)
}
export default App;
So as you see, everything looks okay, but for some reason React doesn't render the components, so the page looks empty. I've searched on the internet and found about 'MuiThemeProvider', but adding it didn't really help either.
You need to create a theme and pass it as prop to ThemeProvider which in turn wraps the entire App during ReactDOM.render stage itself. Something like this:
import * as React from 'react';
import ReactDOM from 'react-dom';
import CssBaseline from '#mui/material/CssBaseline';
import { ThemeProvider } from '#mui/material/styles';
import App from './App';
import theme from './theme';
ReactDOM.render(
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<App />
</ThemeProvider>,
document.querySelector('#root'),
);
Only then will your Material UI components work as you expect.
i am creating my first React Application (WebApp) and I have following issue.
I want a Navigation Bar and therefore I am using the AppBar component of the material-ui lib. I used the the example Simple App Bar explained on the official material-ui page.
If I compile and run the app I get the following result:
Why it doesn't look like the example on the website, althought I used the same code. What am I doing wrong?
Thanks in advance.
My js file:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));
export default function ButtonAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={classes.menuButton}
color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import ButtonAppBar from './Components/ButtonAppBar';
ReactDOM.render(
<ButtonAppBar/>,
document.getElementById('root')
);
reportWebVitals();
UPDATE: I found the cause of my problem. I had an import of a component in my index.js file (which was not used). This component had a .css file attached which overruled the style of the AppBar.
I didn't know the .css file of a not used component has an impact, but I was wrong ^^
So as for why the color is not matching with documentation is because Material UI documentation uses it's own custom theme https://material-ui.com/customization/default-theme/, you can go to palette > Primary to get the exact color code.
As for why your nav bar looks like that I don't know I compiled the same code but got the desired result except the color, here's the code https://codesandbox.io/s/navbar-2xp1q?file=/demo.js
I'm playing with React and material-ui, other stuff have worked but for some reason <CardHeader> is not getting rendered.
Below is the code
import React from "react";
import Card from "#material-ui/core/Card";
import CardHeader from "#material-ui/core/Card";
import CardContent from "#material-ui/core/Card";
import CardActions from "#material-ui/core/Card";
import Button from "#material-ui/core/Button";
import Paper from "#material-ui/core/Paper";
import Typography from "material-ui/Typography";
class PaperCard extends React.Component {
render() {
return (
<Card>
<CardHeader title="CaHellord" subheader="Test ME" />
<CardContent>
<Typography type="title">Word of the day</Typography>
<Typography type="headline" component="h2">
impediments
</Typography>
<Typography component="p">adjective</Typography>
</CardContent>
<CardActions>
<Button dense> Learn More </Button>
</CardActions>
</Card>
);
}
}
export default PaperCard;
Could someone point out the obvious which I have missed.
It's just the case of incorrect import.
Replace the import of CardHeader from
import CardHeader from "#material-ui/core/Card";
to
import CardHeader from "#material-ui/core/CardHeader";