I'm new in react. when I'm enter a code using Grid component in material-ui.com it shows this error. Module not found: Can't resolve '.module.scss'* Do anyone know how to solve this.?
here is my code,
import { Grid, makeStyles, Paper } from '#material-ui/core';
import React from 'react';
import MC_MainH1 from '../components/MC_MainH1';
import MC_Para from '../components/MC_Para';
import image from './../img/4636927.jpg';
import './../components/styles/Para.css';
import classes from '*.module.scss';
function Features() {
return (
<Grid container>
<center>
<Grid item xs={5}>
<MC_MainH1 mainH1="Features"/>
</Grid>
</center>
<Grid item xs={12}>
<Grid item xs={6}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
</Grid>
</Grid>
)
}
export default Features
I don't think you actually need to import classes. I had the same issue. Turns out the auto-complete simply added the import statement when I typed in classes.
To style material UI components,
`
const useStyles = makeStyles((theme)=>{
//Styling required
});
const classes = useStyles();
`
Related
I'm trying to make a react app that loads a google map.
but somehow the map doesn't show and not an error was reported in console logs....
import React from 'react'
import GoogleMapReact from 'google-map-react'
import {Paper, Typography, useMediaQuery} from '#material-ui/core'
import LocationOnOutlinedIcon from '#material-ui/icons/LocationOnOutlined'
import Rating from '#material-ui/lab'
import useStyles from './styles'
const Map = () => {
const classes = useStyles()
const isMobile = useMediaQuery('(min-width:600px)')
const coordinates = { lat:0, lng: 0}
return (
<div className={classes.mapContainer}>
<GoogleMapReact
bootstrapURLKeys={{ key: 'AIzaSyBrSAzFufdmJBVojpd7idemPVGp8HskFKY' }}
defaultCenter={coordinates}
center={coordinates}
defaultZoom={14}
margin={[50,50,50,50]}
>
</GoogleMapReact>
</div>
)
}
export default Map
ㄴ this is Map.js file
import Header from "./components/Header/Header";
import {List} from "./components/List/List";
import Map from "./components/Map/Map";
import {CssBaseline, Grid} from '#material-ui/core';
function App() {
return (
<div className="App">
<CssBaseline></CssBaseline>
<Header/>
<Grid container spacing={3} style={{ width: '100%'}}>
<Grid item xs={12} md={4}>
<List/>
</Grid>
<Grid item xs={12} md={8}>
<Map/>
</Grid>
</Grid>
</div>
);
}
export default App;
ㄴthis is App.js file
enter image description here
What's causing the error(if that is an error)?
j
How can I make the map show up in my app?
I have a reusable component using Material UI Grid containers. I have a simple snapshot test in jest and am receiving the message
Summary of all failing tests
FAIL src/components/Form/__tests__/FormContentGrid.node.js
● renders correctly
Warning: Failed prop type: The prop `xs` of `Grid` must be used on `item`.
in WithStyles(ForwardRef(Grid))
11 | </LabelWrapper>
12 | </Grid>
> 13 | <Grid container spacing={1} xs={10}>
| ^
14 | {children}
15 | </Grid>
16 | </Grid>
Here is the component the test is written for:
import React from 'react';
import PropTypes from 'prop-types';
import { Grid } from '#material-ui/core';
import { LabelWrapper, SideLabel } from './components';
const FormContentGrid = ({ label, children }) => (
<Grid container spacing={1}>
<Grid item xs={1}>
<LabelWrapper>
<SideLabel>{label}</SideLabel>
</LabelWrapper>
</Grid>
<Grid container spacing={1} xs={10}>
{children}
</Grid>
</Grid>
);
FormContentGrid.propTypes = {
label: PropTypes.string,
children: PropTypes.node,
};
export default FormContentGrid;
Here is the test:
import React from 'react';
import { shallow } from 'enzyme';
import FormContentGrid from '../FormContentGrid';
it('renders correctly', () => {
const component = shallow(<FormContentGrid label="test" />);
expect(component).toMatchSnapshot();
});
I'm trying to figure out why the test is failing and how to fix it
It looks like the way to get around this is to set item equal to true in the container.
<Grid container spacing={1} xs={10} item={true}>
I've created a project using React and Material-UI for React.
Coming from a Bootstrap background, I've noticed none of these components come with any margin around their components.
In Bootstrap I can add spacing like this:
<div class="row">
<div class="col-xs-12">
...
</div>
</div>
But I've got no idea what component to use to create such spacing.
I'm currently using custom classes to create some sort of spacing, but it doesn't feel correct.
App.tsx:
<Container maxWidth="lg" className="container-padding">
...
</Container>
App.css:
.container-padding {
padding: 30px;
}
For example, add spacing between these elements with an existing component:
I'm open for suggestions.
There is a grid layout component in #material-ui similar to Bootstrap grid. Both are based on a 12-column grid.
The below example demonstrates it,
import Box from '#material-ui/core/Box';
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
return (
<Box m={4}>
<Grid container spacing={3}>
<Grid item xs={6}>
<Paper>xs=6</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=6</Paper>
</Grid>
<Grid item xs={3}>
<Paper>xs=3</Paper>
</Grid>
<Grid item xs={3}>
<Paper>xs=3</Paper>
</Grid>
<Grid item xs={3}>
<Paper>xs=3</Paper>
</Grid>
<Grid item xs={3}>
<Paper>xs=3</Paper>
</Grid>
</Grid>
</Box>
<Box mx={3}>
Box 2 content
</Box>
<Box my={3}>
Box 3 content
</Box>
);
So to summarize,
m - all sides margin
mx - Horizontal spacing
my - Vertical spacing
I've used the "Lobotomized Owl" selector by Heydon Pickering: * + *.
I created a 'container' component Vertical.js:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import { Box } from '#material-ui/core';
const useStyles = makeStyles((theme) => ({
vertical: {
'& > *+*': {
marginTop: '1.5rem',
},
},
}));
const Vertical = ({ children }) => {
const classes = useStyles();
return <Box className={classes.vertical}>{children}</Box>;
};
export default Vertical;
Then use it in any other components e.g. Example.js:
import React from 'react';
import Vertical from './Vertical';
const Example = () => {
return (
<Vertical>
<Component/>
<Component />
<Another />
<AnotherComponent />
</Vertical>
);
};
export default Example;
I am working with React and Material-UI. I want to divide the code into two columns. In one of this, I want to render a map using deck.gl.
Apparently, deck.gl is rendered fullscreen and it covers all the screen. I even tried to set the attributes width={80} and height={80} to the DeckGL component but it is still covering the rest of the page.
App.js
import React, { Component } from 'react';
import './App.css';
import Grid from '#material-ui/core/Grid';
import Map from './Map.js';
class App extends Component {
render() {
return (
<div >
<Grid container spacing={24}>
<Grid item xs={3}>
Column text
</Grid>
<Grid item xs={9}>
<Map/>
</Grid>
</Grid>
</div>
);
}
}
export default App;
Map.js
/// app.js
import React from 'react';
import DeckGL, {PolygonLayer} from 'deck.gl';
import {StaticMap} from 'react-map-gl';
// Set your mapbox access token here
const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWZvZ2xpbyIsImEiOiJjamt2N2Z2aWkwNXJxM3BxNXo4Mmt1a3MwIn0.IqS5iv1ZmLht4hm-N0cDYg';
// Initial viewport settings
const initialViewState = {
longitude: -87.630259,
latitude: 41.873400,
zoom: 13,
pitch: 35,
bearing: 0
};
// Data to be used by the LineLayer
const data = [{sourcePosition: [-122.41669, 37.7853], targetPosition: [-122.41669, 37.781]}];
class Map extends React.Component {
render() {
const layers = [
];
return (
<DeckGL
initialViewState={initialViewState}
controller={true}
layers={layers}
>
<StaticMap
mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
/>
</DeckGL>
);
}
}
export default Map;
9Try this.
<Grid container spacing={24}>
<Grid item xs={3}>
Column text
</Grid>
<Grid item xs={3} lg={9}>
<Map/>
</Grid>
i had the same problem, the problem is that deck.gl by default is 100% width and 100% height and position absolute so it displays on top of your grid, what i did i manually overwrote deck.gl style rules in my css with '!important' rule or the second option you can put deck.gl in another div and give that div with height because deck uses 100% its parent height and width
I use react-container-dimensions to solve this problem.
<Grid key={value} item>
<Paper className={classes.paper}>
<ContainerDimensions>
<Map />
</ContainerDimensions>
</Paper>
</Grid
You just need to give height and width to the div and render that deckGL map into that div. It will show you accordingly. Because deck always follow its parents properties.
There is a grid component in material ui and I want it to be unit tested using jest in my React application. Please find my code below
For the above code, how we will write unit test? I went through their testing guide https://material-ui.com/guides/testing, but it is not clear.Any ideas/suggestions are really appreciated
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
import "./styles.scss";
const styles = theme => ({
root: {
flexGrow: 1
},
paper: {
height: 140,
width: 100
}
});
function Space({ classes }) {
const x = [1, 2, 3];
return (
<div className="center">
<Grid container className={classes.root}>
<Grid item xs={12}>
<Grid container justify="center" spacing={Number(32)}>
{x.map(value => (
<Grid key={value} item>
<Paper className={classes.paper} />
</Grid>
))}
</Grid>
</Grid>
</Grid>
</div>
);
}
I should be able to unit test the above code using jest
People might hate me for saying this. Since this case does not contain any logic I would just export the function, setup props which reflect real data, and make a snapshot of your shallow rendered function.
Whenever it changes, check it before you update it and all is okay.
EDIT: export the normal component without the withStyles HOC and add the classes to your mocked props.
ANOTHER EDIT:
Your test should probably look something like this in this case:
describe('SpaceComponent', () => {
it('it renders the component correctly', () => {
const props = { classes: { root: 'root', paper: 'paper' } };
const component = shallow(<Space {...props} />);
expect(component).toMatchSnapshot();
});
});