Material-UI, my Toggle Switch are so ugly - reactjs

I'm new with Material UI and I don't understand why my Toggle looks like that...1 and 2
I don't have any compilations issues and my code is very simple :
return (
<Grid container spacing={2}>
<Grid item xs={6}><Button variant="contained" >{exploitantLigne.raisonSociale}</Button></Grid>
<Grid item xs={3}></Grid>
<Grid item xs={3}>
<FormGroup>
<FormControlLabel control={<Switch defaultChecked />} color="primary" label="" />
</FormGroup>
</Grid>
</Grid>
);
And of course, in SandBox everything works perfectly !
Here is my Package.json, Do Idid anything wrong ?
{
"name": "ve-session",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#material-ui/core": "^4.12.3",
"#mui/icons-material": "^5.4.2",
"#mui/lab": "^5.0.0-alpha.69",
"#mui/material": "^5.4.2",
"#mui/styled-engine-sc": "^5.4.2",
"#mui/styles": "^5.4.2",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"styled-components": "^5.3.3",
"ts-loader": "^9.2.6",
"typescript": "^4.5.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Thanks !

I assume that there is a mismatch between the MUI component imports and the version you've installed. I just used the correct way of importing the components.
See the sandbox link
And code below
import "./styles.css";
import Switch from "#mui/material/Switch";
import Grid from "#mui/material/Grid";
import Button from "#mui/material/Button";
import FormGroup from "#mui/material/FormGroup";
import FormControlLabel from "#mui/material/FormControlLabel";
export default function App() {
return (
<Grid container spacing={2}>
<Grid item xs={6} sx={{ pl: "10px" }}>
<Button variant="contained">exploitantLigne.raisonSociale</Button>
</Grid>
<Grid item xs={3}></Grid>
<Grid item xs={3}>
<FormGroup>
<FormControlLabel
control={<Switch defaultChecked />}
color="primary"
label=""
/>
</FormGroup>
</Grid>
</Grid>
);
}

Related

Interface is a reserved word when using yarn workspaces, typescript + nextjs + common react component library

I am trying to create a monorepo (yarn workspaces) with a next.js application and a separate react component library. But when i start the next.js app and try to use any component from the react library i get the error The keyword 'interface' is reserved.
My file structure:
/apps
/backend <- express server
/frontend <- next.js
/packages
/ui
index.tsx
/components
...
package.json
My package.json files:
/package.json
{
"name": "monorepo-demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": "true",
"workspaces": [
"packages/**",
"apps/**"
],
"scripts": {
"dev:backend": "cd apps/backend && yarn dev",
"dev:frontend": "cd apps/frontend && yarn dev",
"dev": "concurrently \"yarn workspace frontend dev\" \"yarn workspace backend dev\""
},
"dependencies": {
"concurrently": "^7.4.0"
}
}
/apps/frontend/package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#types/styled-components": "^5.1.26",
"next": "12.3.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.4.0",
"styled-components": "^5.3.5",
"ui": "*"
},
"devDependencies": {
"#types/node": "18.7.16",
"#types/react": "18.0.18",
"#types/react-dom": "18.0.6",
"eslint": "8.23.0",
"eslint-config-next": "12.3.0",
"typescript": "4.8.3"
}
}
/packages/ui/package.json
{
"name": "ui",
"version": "0.0.0",
"private": true,
"license": "MIT",
"main": "dist/index.js",
"files": [
"components/**/*"
],
"dependencies": {
"#types/react": "^18.0.18",
"#types/styled-components": "^5.1.26",
"config": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.5",
"tsc": "^2.0.4",
"typescript": "^4.8.3"
},
"scripts": {
"build": "tsc",
"dev": "tsc -w"
}
}
Example of next.js page using components
/* /apps/frontend/pages/index.tsx */
import type { NextPage } from "next";
import { Button, Heading } from "ui";
import { BsEmojiSmile } from "react-icons/bs";
const Home: NextPage = () => {
return (
<>
<div>
<Button small>Small button</Button>
<Button medium>Medium button</Button>
<Button big>Big button</Button>
<Button>No size given (default to medium)</Button>
</div>
<div>
<Button small icon>
<BsEmojiSmile />
Small button w/icon
</Button>
<Button medium icon>
<BsEmojiSmile />
Medium button w/icon
</Button>
<Button big icon>
<BsEmojiSmile />
Big button w/icon
</Button>
<Button icon>
<BsEmojiSmile />
No size given (default to medium) w/icon
</Button>
</div>
<div>
<Heading small>Small heading (h3)</Heading>
<Heading medium>Medium heading (h2)</Heading>
<Heading big>Big heading (h1)</Heading>
</div>
</>
);
};
export default Home;
Example of component
/* /packages/ui/components/Button/Button.tsx */
import styled, { css } from "styled-components";
interface Props {
small?: boolean;
medium?: boolean;
big?: boolean;
icon?: boolean;
}
const Button = styled.button<Props>`
background: black;
border: none;
color: white;
border-radius: 7px;
cursor: pointer;
margin: 20px;
padding: ${(props) => {
if (props.small) return "8px 10px";
if (props.medium) return "12px 18px";
if (props.big) return "20px 25px";
return "12px 18px";
}};
font-size: ${(props) => {
if (props.small) return "12px";
if (props.medium) return "16px";
if (props.big) return "20px";
return "16px";
}};
// Alternative
${(props) =>
props.small &&
css`
padding: 8px 12px;
font-size: 12px;
`}
${(props) =>
props.icon &&
css`
display: inline-flex;
column-gap: 12px;
justify-content: center;
align-items: center;
svg,
i {
width: 24px;
height: 24px;
color: white;
}
`}
`;
export default Button;
I have tried just running yarn dev on the frontend project, yarn dev on both frontend and ui. But no luck. Also tried with and without tsc on ui package.
Anyone done something similar with any luck?
Thanks!

Menu Items not vertically aligned in select drop down menu of React Material ui

In my react project, I have used the react material ui dropdown menu. But menu items were not vertically aligned. You can find the image below how it looks like.
Image view of the menu items
So Here is my code.
<div className="right">
<form onSubmit={handleSubmit}>
<Grid container spacing={2} columnSpacing={5}>
<Grid item xs={6}>
<FormControl>
<FormLabel required="true" className="label">
Category
</FormLabel>
<Select
style={{
paddingBottom: '20px',
width: '220%',
height: '35px',
}}
id="demo-simple-select"
name="category"
value={values.category}
required
onChange={handleChange}
>
<MenuItem value="subscription">Subscription </MenuItem>
<MenuItem value="site">Site </MenuItem>
<MenuItem value="payment">Payment </MenuItem>
<MenuItem value="billing">Billing </MenuItem>
<MenuItem value="other">Other </MenuItem>
</Select>
</FormControl>
Package.json file :
{
"name": "project_syncfusion_dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#material-ui/icons": "^4.11.3",
"#material-ui/pickers": "^3.3.10",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.8.4",
"#mui/x-data-grid": "^5.12.2",
"#syncfusion/ej2": "^19.4.48",
"#syncfusion/ej2-react-calendars": "^19.4.48",
"#syncfusion/ej2-react-charts": "^19.4.50",
"#syncfusion/ej2-react-dropdowns": "^19.4.52",
"#syncfusion/ej2-react-grids": "^19.4.50",
"#syncfusion/ej2-react-inputs": "^19.4.52",
"#syncfusion/ej2-react-kanban": "^19.4.48",
"#syncfusion/ej2-react-popups": "^19.4.52",
"#syncfusion/ej2-react-richtexteditor": "^19.4.50",
"#syncfusion/ej2-react-schedule": "^19.4.50",
"axios": "^0.27.2",
"date-fns": "^2.28.0",
"i18n-iso-countries": "^7.4.0",
"moment": "^2.29.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.4.0",
"react-moment": "^1.1.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"sweetalert": "^2.1.2",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.6",
"tailwindcss": "^3.0.19"
}
}
I am a beginner to front-end development and can someone help me to make the menu items vertically aligned?

Getting an error when implementing react navigation in React Native

// In APP.js
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function Nave() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
----------------------------------------------------------
In package.json
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-navigation/stack": "^5.2.14",
"expo": "~37.0.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-gesture-handler": "~1.6.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.3.8",
"react-native-safe-area-context": "0.7.3",
"react-native-reanimated": "~1.7.0",
"react-native-screens": "~2.2.0",
"#react-native-community/masked-view": "0.1.6"
},
"devDependencies": {
"babel-preset-expo": "~8.1.0",
"#babel/core": "^7.8.6"
},
"private": true
}
enter image description here
If I could get some help, it wouldn't be a denial.
I already did a complete re-installation via npm of react-native and react-navigation following the documentation.
But, I don't understand why my app doesn't launch and displays this error message. Knowing that I use an ios simulator on Macos catalina.
It looks like you don't have #react-navigation/native in your package.json. Did you follow the instructions in the react-navigation docs?
First run:
npm install #react-navigation/native
Then run:
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context #react-native-community/masked-view
Then you should be able to follow their Hello React Native tutorial.

Material UI - Drawer does not open

I have a react app with Material-UI 1.2.
Although the state is properly updated, the drawer does not open close.
I have also correctly applied the bind on onLeftIconButtonTouchTap.
Here is my implementation of the TemporaryDrawer :
// .. imports
const styles = {
list: {
width: 250,
},
fullList: {
width: 'auto',
},
menuButton: {
marginLeft: 12,
marginRight: 36,
},
};
class TemporaryDrawer extends React.Component {
render() {
const { classes, toggleDrawer, isOpen } = this.props;
const sideList = (
<div className={classes.list}>
<List>
<ListItem button>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItem>
</List>
</div>
);
console.log(' isOpen ' + isOpen);
return (
<div>
<IconButton className={classes.menuButton} color="inherit" onClick={toggleDrawer}>
<MenuIcon />
</IconButton>
<Drawer open={isOpen} onClose={toggleDrawer}>
<div
tabIndex={0}
role="button"
onClick={toggleDrawer}
onKeyDown={toggleDrawer}
>
{sideList}
</div>
</Drawer>
</div>
);
}
}
TemporaryDrawer.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(TemporaryDrawer);
used in this MenuAppBar.js
// ... imports
const styles = {
root: {
flexGrow: 1,
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
class MenuAppBar extends React.Component {
state = {
auth: true,
drawerOpen: false,
};
handleMenu = () => {
this.setState({ drawerOpen: !this.state.drawerOpen });
};
render() {
const { classes } = this.props;
const { drawerOpen } = this.state;
console.log(' state ' + this.state.drawerOpen);
return (
<div className={classes.root}>
<AppBar position="static" onLeftIconButtonTouchTap={this.handleMenu.bind(this)}>
<Toolbar>
<TemporaryDrawer isOpen={drawerOpen} toggleDrawer={this.handleMenu} />
</Toolbar>
</AppBar>
</div>
);
}
}
MenuAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(MenuAppBar);
package.json
{
"name": "find-swim",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/codemod": "^1.1.0",
"#material-ui/core": "^1.2.0",
"#material-ui/icons": "^1.1.0",
"firebase": "^4.8.0",
"material-ui": "^0.19.4",
"material-ui-autocomplete-google-places": "^2.2.0",
"material-ui-places": "^1.1.7",
"mui-places-autocomplete": "^2.0.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-ga": "^2.4.1",
"react-google-button": "^0.4.0",
"react-google-maps": "^9.2.2",
"react-places-autocomplete": "^5.4.3",
"react-redux": "^5.0.6",
"react-redux-firebase": "^2.0.0-beta.16",
"react-redux-form": "^1.16.5",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.0.16",
"react-tap-event-plugin": "^3.0.2",
"recompose": "^0.26.0",
"redux": "^3.7.2",
"redux-devtools": "^3.4.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "set GENERATE_SOURCEMAP=false && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "firebase deploy"
},
"devDependencies": {
"redux-devtools-extension": "^2.13.2"
}
}
it s crazy but the issue was with the combination:
"#material-ui/core": "^1.2.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
As soon as I ve updated my dependencies to those of Ramil in his codesandbox, it worked.
"#material-ui/core": "1.2.3",
"react": "^16.3.0",
"react-dom": "^16.3.0",
I hope this helps someone..
I don't know where you got this onLeftIconButtonTouchTap={this.handleMenu.bind(this)}
But what you can do is:
<AppBar position="static">
<IconButton
className={classes.menuButton}
color="inherit"
aria-label="Menu"
onClick={this.handleMenu.bind(this)}
>
<MenuIcon />
</IconButton>
<Toolbar>
<TemporaryDrawer
isOpen={drawerOpen}
toggleDrawer={this.handleMenu}
/>
</Toolbar>
</AppBar>
Edit: I tried your code in sandbox. Apparently, nothing is wrong with your code. https://codesandbox.io/s/pk9921kkw0

react-native-elements: icons throw Invariant Violation error

I'm new to react native and I face a problem I have no idea how to solve.
I created and started a new project as follows:
create-react-native-app ProjectName
cd ProjectName
yarn add react-native-elements#beta
npm start
The package.json looks like this:
{
"name": "test",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "25.0.0",
"react-native-scripts": "1.11.1",
"react-test-renderer": "16.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^25.0.0",
"react": "16.2.0",
"react-native": "0.52.0",
"react-native-elements": "^1.0.0-beta3"
}
}
Then I wanted to insert a button with an icon like this:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native-elements';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
<Button
raised
icon={{ name: 'cached' }}
title='BUTTON WITH ICON' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Unfortunately, I get this error message:
error message on iphone
Does anyone have a hint how I can make the icons work? I already tried to add the vector-icons with 'yarn add react-native-vector-icons', although I do have a create-react-native project, but that did'nt work neither.
Thank you!
It should be this way:
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
...
<Button
icon={
<Icon
name='arrow-right'
size={15}
color='white'
/>
}
title='BUTTON WITH ICON'
/>

Resources