My react project button colour set as primary but it it shown red colour. I want to set it as blue or primary colour. How should I do that. (I'm run on a tutorial)
here is my Button.js
import React from 'react';
import {Button as MuiButton} from "#material-ui/core";
export default function Button(props) {
const {text, size, color, variant, onClick}=props
return (
<MuiButton variant={variant} size={size} color={color} onClick={onClick}>
{text}
</MuiButton>
);
}
Then here is the Controls.js
import Button from "./Button";
const Controls = {
Button
}
export default Controls;
here is button my code in the form,
<div>
<Controls.Button variant="contained" color="primary" size="large" text="Submit"/>
</div>
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.
hope you all doing well, i am very new in react and i was following the guide, but got stuck with this strange problem while I import { Button} from './Button'. Ill provide the full code :
import React from 'react';
import '../App.css';
import { Button } from './Button';
import './HeroSection.css';
function HeroSection() {
return (
<div className='hero-container'>
<div className="hero-btns">
<Button
className='btns'
buttonStyle='btn--outline'
buttonSize='btn--large'>Get Started</Button>
<Button
className='btns'
buttonStyle='btn--primary'
buttonSize='btn--large'>Checkout Events
<i className='far fa-play-circle' /></Button>
</div>
</div>
)
}
export default HeroSection
Here is a Button.js code also:
import React from 'react';
import './Button.css';
import {Link} from 'react-router-dom';
const STYLES= ['btn--primary', 'btn--outline'];
const SIZES= ['btn--medium', 'btn--large'];
export const Buttom =({children, type, onClick, buttonStyle,
buttonSize}) => {const checkButtonStyle=
STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize :
SIZES[0]
return(
<Link to='/Login' className='btn-mobile'>
<button
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
onClick={onClick}
type={type}
>
{children}
</button>
</Link>
)
};
Already Tried to put Button without {}, and tired to export default Button but it didn't fixed it at all :(
if the above is the exact Button.js file you've used
then it's just a typo, change Buttom to Button at line 7, and you're good to go
Apart from that, you can simply export the Button as default
By adding this line
export default Button;
then you'll have to import it like
import Button from './Button';
I made a sample code for you with Button Example.
Here is the App.js file
import "./styles.css";
import Button from "./Button";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Button btnText="I'm a Button" />
</div>
);
}
Here is the Button Component.
function Button({ btnText }) {
return (
<div>
<button>{btnText}</button>
</div>
);
}
export default Button;
here is the codesanbox example
Here is how it looks.
Why inline styling doesnt work in react on components?I dont understand why this is not working.I know is possible to make it different ways.(with css files for example).Im just corius.The intellisense does not help by inline styling either.Its strange..
import "./App.css";
import Button from "./components/Button";
function App() {
return (
<div className="App" >
<Button style={{fontSize:"50px"}} />
</div>
);
}
export default App;
//this is from Button components
import React from "react";
const Button = () => {
return (
<div>
<button>
Change
</button>
</div>
);
};
export default Button;
You need to pass the style property to the Button component:
const Button = ({style}) => {
return (
<div>
<button style={style}>
Change
</button>
</div>
);
};
I try to use material-ui v5, but I found the AppBar has a problem to get theme, so it doesn't show any color.
sandbox: https://codesandbox.io/s/material-uiappbar-roquc?file=/src/App.tsx:111-403
export default function App() {
return (
<div className="App">
<AppBar color="primary" position="static">
<Toolbar>I am AppBar! Where is my color?</Toolbar>
</AppBar>
<Button color="primary" variant="contained">
color
</Button>
</div>
);
}
In this example:
The AppBar can not get default theme color, but the Button can get the default theme color.
If you change the material-ui to v4, then it is all right.
Do you know, what's wrong in my code? Or there is something changed in V5?
I found solution from github, simply wrap the code with <StylesProvider injectFirst>, because in material-ui v5, the Typography, Button, etc components are migrated to emotion, so we need to use the <StylesProvider injectFirst> to keep the CSS injection right order between emotion and JSS.
Here is the original answer from #mnajdova
https://github.com/mui-org/material-ui/issues/24109#issuecomment-750794821
The following code should work correctly
import { Button, AppBar, Toolbar, StylesProvider } from "#material-ui/core";
import React from "react";
export default function App() {
return (
<StylesProvider injectFirst>
<div className="App">
<AppBar color="primary" position="static">
<Toolbar>I am AppBar! Where is my color?</Toolbar>
</AppBar>
<Button color="primary" variant="contained">
color
</Button>
</div>
</StylesProvider>
);
}
I'm developing my first React app. I've imported a Material-ui button and I've customized it.
Now I want to reuse this custom button in several components of my app. I want a different text for each time I use this custom button.
Where do I need to write this specific text for each button?
My button is visible when I import it in other components, but I can't see the text I wrote inside the button component. The button stays empty.
My custom button component : MyButton:
import React from "react";
import Button from "#material-ui/core/Button";
import { withStyles } from "#material-ui/core/styles";
const styles = () => ({
button: {
margin: 50,
padding: 10,
width: 180,
fontSize: 20
}
});
function MyButton(props) {
const { classes } = props;
return (
<Button variant="contained" color="primary" className={classes.button}>
<b> </b>
</Button>
);
}
export default withStyles(styles)(MyButton);
The other component where I import MyButton component : Home :
import React from "react";
import "../App.css";
import MyButton from "./Button";
function Header() {
return (
<header className="Header">
{/* background image in css file */}
<h1>Welcome </h1>
<h3> description...</h3>
<MyButton>Play now</MyButton>
</header>
);
}
export default Header;
I expect the button to show "Play now" (expected output) but for now it stays empty (actual output).
Also, I've found another solution that offers the possibility to write directly the text inside each button (children of MyButton), and customize it if needed.
Pass "children" keyword as "props" to MyButton component :
function MyButton(props) {
const { classes, children } = props;
return (
<Button variant="contained" color="primary" className={classes.button}>
<b>{children}</b>
</Button>
);
}
Then write the text of your button inside the button as you will do in html :
<MyButton> Play now </MyButton>
You will get the most flexibility from your custom Button if you pass all of the props along to the wrapped Button. This will automatically take care of children and classes so long as you use class keys in your styles object that match the CSS classes supported for the wrapped component.
import React from "react";
import Button from "#material-ui/core/Button";
import { withStyles } from "#material-ui/core/styles";
const styles = () => ({
root: {
margin: 50,
padding: 10,
width: 180,
fontSize: 20,
fontWeight: "bold"
}
});
function CustomButton(props) {
return <Button variant="contained" color="primary" {...props} />;
}
export default withStyles(styles)(CustomButton);
Notice in the sandbox example, that this allows you to still leverage other Button features like disabled, specify additional styles, or override some properties specified in CustomButton.
If you have a scenario where you need to handle children explicitly (in my example above I used fontWeight CSS instead of the <b> tag), you can use the following syntax to still pass all the props through to the wrapped component:
function CustomButton({children, ...other}) {
return <Button variant="contained" color="primary" {...other}><b>{children}</b></Button>;
}
Pass text of button as props to your button component
<MyButton text="Play now"></MyButton>
Then inside MyButton component you can get it like
function MyButton(props) {
const { classes,text } = props;
return (
<Button variant="contained" color="primary" className={classes.button}>
<b> {text} </b>
</Button>
);
}