Develop Reference

Warning: React does not recognize the `textColor` prop on a DOM element

Getting this warning: Warning: React does not recognize the 'textColor' prop on a DOM element (everything else is working).
Using it in my component this way:
import { ImageWithFallback, Paper, Tabs, Tab, Typography, Tooltip,} from '#material-ui-core/dist';
<Paper square className={classes.root} data-test-id={testMediaEditRenditionTabPanel.paper}>
<Tabs
value={tabState}
variant="scrollable"
onChange={handleChange}
orientation="vertical"
indicatorColor="primary"
centered
textColor="primary"
className={classes.tabs}
>
</Tabs>
</Paper>
Thanks in advance.

Did you try with textcolor instead of textColor? I think the material UI of your project seems not to be the latest version. Please let me know how it works.

Material ui icons react

Who can help me with this. I need this icons from material ui but I can't find info how I can make it

First of all you have to import the icon in your component then you can use the following code as example:
import FacebookIcon from "#material-ui/icons/Facebook";
const YourComponent = () => (
<div>
<span>...some other content</span>
<FacebookIcon />
</div>
);
export default YourComponent;
If you need to have also a background for your image you can do something like that:
<div style={{ backgroundColor: "#1877d1", padding: "1rem", display: "inline-block" }}>
<FacebookIcon />
</div>
So you need to wrap the icon in a div with a stile.

You can install Material-UI Icons
with npm : npm install #material-ui/icons
with yarn : yarn add #material-ui/icons
and import material-UI icons : link

Material-UI - How to render something on top of the AppBar?

I'm developing a React web app using the Material-UI framework. I've now come to a point where I want to render something on top of the AppBar, but from a different file.
My app is structured like this:
Main.js - contains the AppBar and react-router
Various views or "pages" which are loaded by react-router as children of Main.js
Various components that are rendered by these pages.
You can see what I'm trying to achieve below.
If it helps, here is the code for the AppBar, note; I have also tried with "static" position.
<AppBar position="fixed">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
onClick={handleClick}>
<MenuIcon/>
</IconButton>
<Typography variant="h4" className={classes.title}>
<Link href="/" variant="h4" color="inherit">Site Name</Link>
</Typography>
</Toolbar>
<div>
<Menu
id="Menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}>
<MenuItem onClick={handleClose}>
// SOME MENU ITEM
</MenuItem>
</Menu>
</div>
</AppBar>
And the page where I am trying to render the widget. For now I am just using a Typography component as a placeholder. My understanding is that I need to set the Z index of the div that this widget is wrapped in to elevate it, however, I assume that it is only relative to other components within this view, and not also the AppBar as that is coming from elsewhere?
<div>
<div
style={{
height: 20,
backgroundColor: "yellow",
position: "relative",
zIndex: 10
}}>
<Typography component="h3" variant="h3">Widget Placeholder</Typography>
</div>
<Toolbar></Toolbar> // Empty toolbar is used to push all the other content down below the AppBar when it's position is set to fixed
// other content from this page
</div>
Code sandbox: https://codesandbox.io/s/goofy-feather-cf1kd?file=/src/App.js
Thanks :)

Image not appearing on screen using Material UI + React and HOC for modularization

So I'm trying to have an image displayed on my Card in Material UI but the image never shows up and I'm pretty sure the directory to the image is right. Also, if possible can anyone help me with modularizing my code because as you can see some of my code is being repeated (e.g. the box that's responsible for setting margin), I tried using HOC but I kept getting this error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
import React from "react";
import ReactDOM from "react-dom";
import Grid from "#material-ui/core/Grid";
import Button from "#material-ui/core/Button";
import Card from "#material-ui/core/Card";
import TextField from "#material-ui/core/TextField";
import CreateIcon from "#material-ui/icons/Create";
import styled from "#material-ui/core/styles/styled";
import Box from "#material-ui/core/Box";
import CardMedia from "#material-ui/core/CardMedia";
const PetitionCard = (props) => {
const { title, description, image } = props;
const MyCard = styled(Card)({
display: "block",
width: "25vw",
height: "30vw",
});
return (
<Grid justify='space-evenly'>
<MyCard>
<Box mt={1}>
<Grid container justify='center'>
<TextField
id='outlined-multiline-static'
multiline
rows={1}
variant='outlined'
placeholder='Title'
/>
</Grid>
</Box>
<CardMedia
image='./burger.jpg'
title='Petition'
style={{ height: 0, paddingTop: "40.25%" }}
></CardMedia>
<Box mt={1} justify='center'>
<Grid container justify='center'>
<TextField
size='small'
inputProps={{
style: { fontSize: 15 },
}}
id='outlined-multiline-static'
multiline
rows={5}
placeholder='Description'
variant='outlined'
/>
</Grid>
</Box>
<Box mt={1}>
<Grid container justify='center'>
<Button>
<CreateIcon />
Create Petition!
</Button>
</Grid>
</Box>
</MyCard>
</Grid>
);
};
const App = () => <PetitionCard />;
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
Here is my file directories

import burger from './burger.jpg'
<CardMedia image={burger} />
With webpack, using static assets like images and fonts works similarly to CSS.
You can import a file right in a JavaScript module. This tells webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF. This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths.
If you make a typo or accidentally delete an important file, you will see a compilation error, like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by webpack from content hashes. If the file content changes in the future, webpack will give it a different name in production so you don’t need to worry about long-term caching of assets.
Documentation

How do you center a div element in react w/out external css file

How do I center a div element in react with using an external css file. I tried using bootstrap classes and inline styles that other people posted but none of those worked. I was wondering how you guys would implement this without an external css file.

If you don't have to support old browsers, you may look into Flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Try something like this:
<div style={{display: 'flex', justifyContent: 'center'}}>
<div>centered content</div>
</div>

Offsets: The first uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 6 would be centered by adding an offset of 3, that's (12-6)/2.
In markup this would look like:
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
margin-auto: You can center any column size by using the margin: 0 auto; technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
.col-centered{
float: none;
margin: 0 auto;
}
Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout :
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>

An easy way to do this using react-bootrsrap is
<Grid>
<Row className="text-center"><h1>Our Products</h1></Row>
</Grid>
Use className (instead of class) to take advantage of Bootstrap's built in class of "text-center".

I am using react-bootstrap for this:
export default class CenterView extends React.Component {
render() {
return (
<Grid>
<Row className="show-grid">
<Col xs={1} md={4}></Col>
<Col xs={4} md={4}>{this.props.children}</Col>
<Col xs={1} md={4}></Col>
</Row>
</Grid>
)
}
}
and then in code
<CenterView>
<LoginForm/>
</CenterView>

Have this between the imports and React Class
const styles = {
center: {
marginLeft: "auto",
marginRight: "auto"
}
}
Then to use
<div className={styles.center}>
hi
</div>

I just added:
<Grid container spacing={2} justify="center"></Grid>

For people using React Bootstrap, here I show an example of the classes text-align and justify-content-center. As the names describe, one is for centering text and the other for centering elements.