I am trying to use MUI readymade components in my react application,
I import everything correctly, after all these when I am running the app, there is the only element shows in the browser, not its style.
import React, { Component } from 'react';
import Button from '../node_modules/muicss/lib/react/button';
class App extends Component {
render() {
return (
<div>
<div>
<Button size="small" color="primary">button</Button>
<Button size="small" color="primary" variant="flat">button</Button>
<Button size="small" color="primary" variant="raised">button</Button>
<Button size="small" color="primary" variant="fab">+</Button>
</div>
<div>
<Button color="primary">button</Button>
<Button color="primary" variant="flat">button</Button>
<Button color="primary" variant="raised">button</Button>
<Button color="primary" variant="fab">+</Button>
</div>
<div>
<Button size="large" color="primary">button</Button>
<Button size="large" color="primary" variant="flat">button</Button>
<Button size="large" color="primary" variant="raised">button</Button>
<Button size="large" color="primary" variant="fab">+</Button>
</div>
</div>
);
}
}
export default App;
You dont need to set the exact path for node_modules just type the component name for importing any component.
Like below import statement in material ui doc.
import Button from '#material-ui/core/Button';
Related
I am trying to use chakra ui modal in my app. but this modal is not showing , when I directly pass true to to isOpen .its showing .but when i pass isOpen Disclosure it is not working. when I check the react dev tools. the value of isOpen is changed to true on the button click. but the popup is not coming
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
Button,
useDisclosure,
} from '#chakra-ui/react'
function Home() {
const {isOpen,onOpen,onClose} = useDisclosure()
return (
<>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
{/* <Lorem count={2} /> */}
</ModalBody>
<ModalFooter>
<Button colorScheme='blue' mr={3} onClick={onClose}>
Close
</Button>
<Button variant='ghost'>Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
}
export default Home
I am using ANTD React UI library.
<Modal
width="1100px"
centered
footer={null}
title={
<div className="d-flex align-items-center">
<div className="flex-grow-1">Record Profiles</div>
<div className="mr-4">
<Button
htmlType="submit"
type="primary"
onClick={() =>{this.SaveData(this.form.getFieldValue())}}
icon={<SaveOutlined />}
className="save_btn"
loading={this.state.saving}>
</Button>
<Button
onClick={() => { this.props.onCancel() }}
htmlType="button"
type="primary"
className="cancel_btn ml-2"
icon={<CloseCircleOutlined />}>
</Button>
</div>
</div>
}
visible={true}
closable={false}
okText="Yes"
cancelText="No"
maskClosable={false}
>
<Form
autoComplete="off"
layout="horizontal"
ref={(r) => this.form = r}
initialValues={this.props.record}
onFinish={this.SaveData}
>
.
.
.
</Form>
</Modal>
I want to call the save and close buttons on top of the side of the title. It is displaying correctly, but due to outside form functionalities don't work because the form values don't get outside. Is there any method to get the values outside or form submit?
I have a grid with 4 buttons, it buttons open different modal
how I separate modal from different file and import
ex: modal client, modal followup, modal calendar
In my grid button, I call different modal
want in a different file because I can use in different grid
grid button
import Client from './clientModal';
import Followup from './followup';
import Calendar from './calendar';
modal form
import {
Button,
ModalBody,
ModalFooter,
ModalHeader,
Col,
Form,
FormGroup,
Input,
Label
} from "reactstrap";
const ModalClients = props => {
this.props = {
modalClient: false,
firstName: null
};
return (
<Form
method="POST"
onChange={this.handleChange}
onSubmit={this.onCreate}
encType="multipart/form-data"
>
<ModalHeader toggleModal={this.toggleClient} className="blue-header">
<i className="cui-people"></i>Clients
</ModalHeader>
<ModalBody>
<FormGroup row className="my-0">
<Col xs="8">
<FormGroup>
<Label htmlFor="firstName">First Name</Label>
<Input
onChange={this.handleChange}
name="firstName"
type="text"
id="firstName"
value={this.props.firstName || ""}
placeholder="Enter First Name"
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" type="submit" onClick={this.toggleClient}>
<i className="cis-check-double-alt"></i> Save
</Button>
<Button
color="secondary"
onClick={() => {
this.toggleClient();
this.resetForm();
}}
>
Cancel
</Button>
</ModalFooter>
</Form>
);
};
export default ModalClients;
file grid with buttons
import ClientModal from './clientModal';
<Modal
isOpen={this.state.info}
toggle={this.toggleInfo}
backdrop="static"
keyboard={false}
className={"modal-lg " + this.props.className}
>
<ClientModal />
</Modal>
buttons
<Row>
<Button className="btn btn-primary" onClick={() => this.toggleInfo(id)}>
<i className="cis-comment-bubble-edit"></i>
</Button>
<Button
className="btn btn-success"
onClick={() => this.toggleClient(id)}
>
</Row>
When I use standard button with onClick props event it works perfectly fine
<Button onClick={handleClose}>
Agree
</Button>
But I have also created my new component called ButtonSave and onClick is not working
<ButtonSave text="Agree" onClick={handleClose} />
My code inside ButtonSave component
export default function IconLabelButtons(props) {
const classes = useStyles();
return (
<div>
<Button
variant="contained"
color="primary"
size={props.size}
className={classes.button}
startIcon={<SaveIcon />}
>
{props.text}
</Button>
</div>
);
}
How am I supposed to use my handleClose right there?
You need to update your ButtonSave component and pass the onClick prop to it like:
export default function IconLabelButtons(props) {
const classes = useStyles();
return (
<div>
<Button
variant="contained"
color="primary"
size={props.size}
className={classes.button}
startIcon={<SaveIcon />}
onClick={props.onClick}
>
{props.text}
</Button>
</div>
);
}
Hope it works for you.
You need to use onClick which provided in props:
// <ButtonSave text="Agree" onClick={handleClose} />
const ButtonSave = ({ onClick, text }) => (
<Button onClick={onClick}>{text}</Button>
)
Based on the code you provided, it may be because you didn't pass it from ButtonSave to its child of Button. So:
export default function(props) {
return (
<Button onClick={props.handleClose} />
);
}
I am using flask on the backend and react, react router and material-ui as a frontend.
I have:
material-ui/core 3.4.0,
react router dom 4.3.1
I am trying to create simple sign up form.
I would like to submit the form's data and then redirect to the index page using react router.
My problem is that material-ui button does not work with the link from router.
Is it possible to combine this two together somehow?
My code:
import:
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { withStyles, Grid, Paper, Avatar, Typography, Button, TextField} from '#material-ui/core'
import LockIcon from '#material-ui/icons/LockOutlined'
and render return:
render() {
const { classes } = this.props
const { user: { username, password } } = this.state
return (
<Grid container className={classes.root}>
<Paper className={classes.paper}>
<Avatar className={classes.avatar}>
<LockIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign up
</Typography>
<form onSubmit={this.saveUser}>
<TextField label="Username" value={username} onChange={this.handleChange('username')} margin="normal" required fullWidth/>
<TextField label="Password" value={password} onChange={this.handleChange('password')} margin="normal" required fullWidth type='password'/>
<Button component={Link} to="/" type="submit" fullWidth variant="contained" color="primary">Sign Up</Button>
</form>
</Paper>
</Grid>
);
}
When I remove from Button component={Link} to="/":
<Button type="submit" fullWidth variant="contained" color="primary">Sign Up</Button>
then submit work and saves data in database. When I remove type="submit":
<Button component={Link} to="/" fullWidth variant="contained" color="primary">Sign Up</Button>
then redirect to index page.
Can I combine somehow this two in one button?
RaisedButton, FlatButton from material-ui not working anymore
Add to state:
doRedirect: false
In render():
<Button type="submit" fullWidth variant="contained" color="primary">Sign Up</Button>
In submit hanler:
saveUser = () => {
// **********
// Your code to update database
// **********
this.setState({ doRedirect: true });
}
In render():
{ this.state.doRedirect && <Redirect to="/" /> }
And of course:
import { Redirect } from 'react-router-dom'
In your save user function just redirect after saving the user.
you can get history from props
saveUser = event => {
event.preventDefault()
//update database with user
this.props.history.location.push('new-route')
// or you can use window.location
window.location.href = 'new-route'
}
<Button
onClick={() => {}}
variant="outlined"
component={Link}
to={{
pathname: `/`,
search: location.search,
}}
>
Submit
</Button>