I have this code in the app index.js file.
As you can see its got some styles and also a button component.
Here is the full code:
import React from 'react';
import ReactDOM from 'react-dom';
//Styles Here
var buttonStyle1 = {
margin: '10px 10px 10px 0',
padding: '4px 20px',
border: '1px solid grey'
};
var buttonStyle2 = {
margin: '10px 10px 10px 0',
padding: '4px 10px',
border: '1px solid blue',
borderRadius: 0
};
//Component Here
var Button = React.createClass({
render: function () {
return (
<button
name={this.props.name}
className={this.props.className}
style={buttonStyle1}
onClick={this.handleClick}>{this.props.label}
</button>
);
},
handleClick: function() {
alert('Button pressed name is: '+ this.props.name);
}
});
module.exports = Button;
ReactDOM.render(
<div>
<Button name="button1" label="Button" className="btn btn-success" />
<Button name="button200" label="Label Here" className="btn btn-default" />
<Button name="button20" label="Label again" className="btn btn-default" />
</div>,
document.getElementById('root')
);
What I nee to do is to add the part where it says //Styles Here into an external js file and the same to the part where it says //Component Here so they are both on external files.
How can I do this?
**//Update:**
Here's the current code all now in the same level as index.js
//index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Button from './Buttons';
ReactDOM.render(
<Button style={{fontSize: '14px'}} name='Hi' label='button'/>,
document.getElementById('root')
);
//ButtonStyles.js
module.exports = {
buttonStyle1 : {
margin: '10px 10px 10px 0',
padding: '4px 20px',
border: '1px solid grey'
};
buttonStyle2 : {
margin: '10px 10px 10px 0',
padding: '4px 10px',
border: '1px solid blue',
borderRadius: 0
};
}
//Buttons.js
import React from 'react';
import ReactDOM from 'react-dom';
var Button = React.createClass({
render: function () {
return (
<button
name={this.props.name}
className={this.props.className}
style={this.props.style}
onClick={this.handleClick}>{this.props.label}
</button>
);
},
handleClick: function() {
alert('Button pressed name is: '+ this.props.name);
}
});
No button is showing
Create the separate file for Button component, button.js like this:
import React from 'react';
import ReactDOM from 'react-dom';
var Button = React.createClass({
render: function () {
return (
<button
name={this.props.name}
className={this.props.className}
style={this.props.style}
onClick={this.handleClick}>{this.props.label}
</button>
);
},
handleClick: function() {
alert('Button pressed name is: '+ this.props.name);
}
});
export default Button;
And import this file wherever you want like this:
import Button from './button' //path to file
Use it like this:
<Button />
For styling, create a file style.js, like this:
module.exports = {
buttonStyle1 : {
margin: '10px 10px 10px 0',
padding: '4px 20px',
border: '1px solid grey'
},
buttonStyle2 : {
margin: '10px 10px 10px 0',
padding: '4px 10px',
border: '1px solid blue',
borderRadius: 0
}
}
import this file like this:
import Style from './style' // path
And use it like this: <p style={Style.buttonStyle2}></p>
Let me know if you need any help in this.
check the jsfiddle: https://jsfiddle.net/jty8rggk/
Create a file called ButtonStyles.js:
//ButtonStyles.js
export default {
buttonStyle1: {
margin: '10px 10px 10px 0',
padding: '4px 20px',
border: '1px solid grey'
},
buttonStyle2: {
margin: '10px 10px 10px 0',
padding: '4px 10px',
border: '1px solid blue',
borderRadius: 0
}
}
After that you can create a file for your component called Button.js and then import and use the styles in your component like below.
import React from 'react';
import styles from './ButtonStyles'
//Component Here
var Button = React.createClass({
render: function () {
return (
<button
name={this.props.name}
className={this.props.className}
style={styles.buttonStyle1}
onClick={this.handleClick}>{this.props.label}
</button>
);
},
handleClick: function() {
alert('Button pressed name is: '+ this.props.name);
}
});
module.exports = Button;
Related
I have a webpage that looks like this:
This is my _app.tsx file:
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { createTheme } from '#arwes/design'
import { ThemeProvider, Global, css } from '#emotion/react'
import { globalStyles } from '../shared/styles.js'
function MyApp({ Component, pageProps }: AppProps) {
const theme = createTheme();
return (
<ThemeProvider theme={theme}>
{globalStyles}
<div style={{
marginBottom: theme.space(2),
borderBottom: `${theme.outline(2)}px solid ${theme.palette['primary'].main}`,
padding: theme.space(2),
backgroundColor: theme.palette.neutral.elevate(2),
textShadow: `0 0 ${theme.shadowBlur(1)}px ${theme.palette['primary'].main}`,
color: theme.palette['primary'].main
}}>
Futuristic Sci-Fi UI Web Framework
</div>
<Component {...pageProps} />
</ThemeProvider>
)
}
export default MyApp
And this is shared/styles.js:
import { css, Global, keyframes } from '#emotion/react'
import styled from '#emotion/styled'
export const globalStyles = (
<Global
styles={css`
html,
body {
margin: 0;
background: papayawhip;
min-height: 100%;
font-size: 24px;
}
`}
/>
)
export const blueOnBlack = (theme) => css`
marginBottom: ${theme.space(2)};
borderBottom: ${theme.outline(2)}px solid ${theme.palette['primary'].main};
padding: ${theme.space(2)};
backgroundColor: ${theme.palette.neutral.elevate(2)};
textShadow: 0 0 ${theme.shadowBlur(1)}px ${theme.palette['primary'].main};
color: ${theme.palette['primary'].main};
`
Notice that blueOnBlack is an attempt to put the Futuristic Sci-Fi UI Web Framework style into its own importable variable.
The problem is that when I put blueOnBlack into the _app.tsx as the style for the Futuristic Sci-Fi UI Web Framework div tag, it fails.
This is _app.tsx with blueOnBlack imported:
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { createTheme } from '#arwes/design'
import { ThemeProvider, Global, css } from '#emotion/react'
import { globalStyles, blueOnBlack } from '../shared/styles.js'
function MyApp({ Component, pageProps }: AppProps) {
const theme = createTheme();
return (
<ThemeProvider theme={theme}>
{globalStyles}
<div style={blueOnBlack(theme)}>
Futuristic Sci-Fi UI Web Framework
</div>
<Component {...pageProps} />
</ThemeProvider>
)
}
export default MyApp
The resulting webpage looks like this,
It's almost right... but it dropped the background color. Why is it different?
I changed shared/styles.js from:
import { css, Global, keyframes } from '#emotion/react'
import styled from '#emotion/styled'
export const globalStyles = (
<Global
styles={css`
html,
body {
margin: 0;
background: papayawhip;
min-height: 100%;
font-size: 24px;
}
`}
/>
)
export const blueOnBlack = (theme) => css`
marginBottom: ${theme.space(2)};
borderBottom: ${theme.outline(2)}px solid ${theme.palette['primary'].main};
padding: ${theme.space(2)};
backgroundColor: ${theme.palette.neutral.elevate(2)};
textShadow: 0 0 ${theme.shadowBlur(1)}px ${theme.palette['primary'].main};
color: ${theme.palette['primary'].main};
`
to this:
import { css, Global, keyframes } from '#emotion/react'
import styled from '#emotion/styled'
export const globalStyles = (
<Global
styles={css`
html,
body {
margin: 0;
background: papayawhip;
min-height: 100%;
font-size: 24px;
}
`}
/>
)
export const blueOnBlack = (theme) => styled.div={
marginBottom: theme.space(2),
borderBottom: theme.outline(2) + 'px solid' + theme.palette['primary'].main,
padding: theme.space(2),
backgroundColor: theme.palette.neutral.elevate(2),
textShadow: '0 0 ' + theme.shadowBlur(1) + 'px ' + theme.palette['primary'].main,
color: theme.palette['primary'].main
}
And then it ran and gave me the correct styling including the black background on the text. Notice that I'm using styled.div instead of css
I'm trying to build custom scrollable chips array with material ui version 4 no version 5.
In older tickets i could see similar demos:
Demo code
I want to change this component scrolling bar to left and right arrow buttons (same line with the Chip array).
please suggest how it can be done by modifying the same code or advice on another approach.
You can use Material UI Tabs
And style scroll Buttons using .MuiTabs-scrollButtons class name.
Or change scroll buttons using Tabs's prop: ScrollButtonComponent.
Material UI Tabs Documentation
#Amr Thanks for the advice, I have now exactly what I need.
I can't share the full code because it's mixed a lot with other code that is not related to this question, but here is something similar that I can share:
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
import Chip from "#material-ui/core/Chip";
import Box from "#material-ui/core/Box";
import Tabs from "#material-ui/core/Tabs";
import IconButton from "#material-ui/core/IconButton";
import styled from "#emotion/styled";
import ChevronLeftIcon from "#material-ui/icons/ChevronLeftRounded";
import ChevronRightIcon from "#material-ui/icons/ChevronRightRounded";
const StyledChip = styled(Chip)`
border-radius: 16px;
text-transform: capitalize;
color: ${(props) => (props.selected ? "#FFFFFF" : "#6877AE")};
background-color: ${(props) => (props.selected ? "#03194F" : "#FFFFFF")};
border: 4px solid ${"#03194F"};
border-color: ${(props) =>
props.selected ? "#03194F" : "rgba(0, 83, 229, 0.12)"};
.MuiChip-root&:hover {
background-color: ${(props) => (props.selected ? "#03194F" : "")};
}
`;
const StyledIconButton = styled(IconButton)`
left: ${(props) => (props.isLeft ? "0" : "none")};
right: ${(props) => (props.isLeft ? "none" : "0")};
height: 32px;
width: 32px;
position: absolute;
border-radius: 16px;
border: 1px solid gray;
//top: 33%;
background-color: white;
color: rgba(0, 83, 229, 1);
border-color: rgba(0, 83, 229, 0.12);
z-index: 1;
opacity: 1;
margin: 20px;
:hover {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12);
border-color: white;
background-color: inherit;
}
`;
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
justifyContent: "center",
flexWrap: "nowrap",
listStyle: "none",
padding: theme.spacing(0.5),
margin: 0,
overflow: "auto",
maxWidth: "100%"
},
chip: {
margin: theme.spacing(2)
}
}));
export default function ChipsArray() {
const classes = useStyles();
const [chipData, setChipData] = React.useState([
{ key: 0, label: "Angular" },
{ key: 1, label: "jQuery" },
{ key: 2, label: "Polymer" },
{ key: 3, label: "React" },
{ key: 4, label: "Vue" },
{ key: 5, label: "Knockout" },
{ key: 6, label: "Ember" },
{ key: 7, label: "D3" },
{ key: 8, label: "Google Charts" },
{ key: 9, label: "C+" },
{ key: 10, label: "C++" },
{ key: 11, label: "NodeJS" }
]);
const [selectedIndustryFilter, setSelectedIndustryFilter] = React.useState(
"Angular"
);
return (
<Box className={classes.root}>
<Tabs
variant="scrollable"
scrollButtons="on"
aria-label="scrollable auto tabs example"
ScrollButtonComponent={(props) => {
if (props.direction === "left") {
return (
<StyledIconButton isLeft {...props}>
<ChevronLeftIcon />
</StyledIconButton>
);
} else if (props.direction === "right") {
return (
<StyledIconButton {...props}>
<ChevronRightIcon />
</StyledIconButton>
);
} else {
return null;
}
}}
>
{chipData.map((data) => {
return (
<StyledChip
label={data.label}
onClick={() => {
setSelectedIndustryFilter(data.label);
console.log(data.label);
}}
selected={data.label === selectedIndustryFilter}
key={data.key}
className={classes.chip}
/>
);
})}
</Tabs>
</Box>
);
}
also you can check it here:
https://codesandbox.io/s/demo-material-ui-chips-single-line-with-scroll-forked-2f0z30?file=/src/index.js
i'm currently i'm working in a project that is required to have a "Inset Fab" button between containers. I saw in the Material Design documentation that the name of the component is called "Inset FAB", i'd got some tutorials on google (but didn't find many) on how to implement, but normally they are "workaround" (setting a background border with radius behind the button). I'm still puzzled in how to do it.
Currently i'm using the MUI/Material UI 5.
Example of inset Fab
from what I understand inset is done through box shadows.
specifically
boxShadow: "0px 0px 0px 5px white inset"
here is a code sandbox I threw together
import React from "react";
import ReactDOM from "react-dom";
import { Box, Fab } from "#material-ui/core";
const appBarStyle = {
height: "100px",
backgroundColor: "blue",
position: "relative"
};
const fabWithInset = {
position: "absolute",
backgroundColor: "red",
boxShadow: "0px 0px 0px 0px white inset",
left: "50%",
bottom: "0px",
transform: "translate(0%,50%)",
"&:onclick": {
boxShadow: "0px 0px 0px 5px white inset"
}
};
function App() {
return (
<Box style={appBarStyle}>
<Fab style={fabWithInset} />
</Box>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));
https://codesandbox.io/s/goofy-pasteur-ntcuj
import "./styles.css";
export default function App() {
const separator = {
backgroundColor: "#E9E9E9",
height: "12px",
margin: "8px",
borderRadius: "4px"
};
return (
<div className="App">
<hr style={separator} />
<hr className="line-separator" />
</div>
);
}
.line-separator {
background-color: #e9e9e9;
height: 2px;
margin: 8px;
border-radius: 4px;
}
styles applied via java script is working fine but the same is not working from css for <hr /> tag.
Your className is wrong.
try: <hr className="line-separator" />
You have another Typo in your CSS, your height should be 12px not 2px
you have a typo in setting className of the second hr as "separator". It should match the className specified in the css file.
Correct code:
import "./styles.css";
export default function App() {
const separator = {
backgroundColor: "#E9E9E9",
height: "12px",
margin: "8px",
borderRadius: "4px"
};
return (
<div className="App">
<hr style={separator} />
<hr className="line-separator" />
</div>
);
}
.line-separator {
background-color: #e9e9e9;
height: 2px;
margin: 8px;
border-radius: 4px;
}
this should be a super quick fix:
Your className needs to match the name of the css class .line-separator
import "./styles.css";
export default function App() {
const separator = {
backgroundColor: "#E9E9E9",
height: "12px",
margin: "8px",
borderRadius: "4px"
};
return (
<div className="App">
<hr style={separator} />
<hr className="line-separator" />
</div>
);
}
The height value here just needs changing to 12px
.line-separator {
background-color: #e9e9e9;
height: 12px;
margin: 8px;
border-radius: 4px;
}
I am using material ui and i have been trying to make the navabr transparent and get the background image behind it, a similar style to stripe.com and i am having trouble moving the image behind and getting it transparent.
Is there a way to get it looking like stripe.com with the transparent appbar and background image moved up? The main problem is moving up the background image
Code for the Navbar
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import IconButton from '#material-ui/core/IconButton';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogContentText from '#material-ui/core/DialogContentText';
import DialogTitle from '#material-ui/core/DialogTitle';
import Checkbox from '#material-ui/core/Checkbox';
import TextField from '#material-ui/core/TextField';
import { Link } from 'react-router-dom'
// Styling for our navbar
const styles = {
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
button: {
margin: 10,
fontSize: 17
},
text: {
textAlign: 'center',
fontSize: 20,
padding: '0.5em'
},
textField: {
align: 'center',
width: 500
}
};
const MyLink = props => <Link to="/signup" {...props} />
// here is our navbar
class Navbar extends React.Component{
state = {
open: false,
};
handleClickOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
state = {
checkedA: true,
checkedB: true,
checkedF: true,
};
handleChange = name => event => {
this.setState({ [name]: event.target.checked });
};
render(){
const { classes } = this.props
return (
<div className={classes.root}>
<AppBar position="static" color="inherit" style={{ background: 'transparent', boxShadow: 'none'}}>
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
</IconButton>
<Typography variant="h6" color="inherit" className={classes.grow}>
</Typography>
<Button color="inherit" onClick={this.handleClickOpen}>Login</Button>
</Toolbar>
</AppBar>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description">
<DialogTitle id="alert-dialog-title">{"Have an account? Log In"}</DialogTitle>
<DialogContent>
<DialogTitle>
<Button variant="contained" color="primary" className={classes.button}>
Sign In with Facebook </Button>
<Button variant="contained" color="primary" className={classes.button}>
Sign In with LinkedIn </Button>
</DialogTitle>
<DialogContentText className={classes.text}>
or
</DialogContentText>
<form>
<TextField
id="filled-email-input"
label="Email"
className={classes.textField}
type="email"
name="email"
autoComplete="email"
margin="normal"
variant="filled"
/>
</form>
<form>
<TextField
id="filled-password-input"
label="Password"
className={classes.textField}
type="password"
autoComplete="current-password"
margin="normal"
variant="filled"
/>
</form>
<Checkbox
checked={this.state.checkedG}
onChange={this.handleChange('checkedG')}
value="checkedG"
color= "inherit"
/>
<DialogContentText>
Remember Me?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button component={MyLink} color="primary" autoFocus>
Don't have an account? Sign Up
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
// requiring a class object
Navbar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Navbar);
And heres the code for the Lading page header/background
import React, {Component} from 'react';
import Background from '../img/fixedImg.png';
import './Header.css';
import { Link } from 'react-router-dom';
const headerStyle = {
backgroundImage: `url( ${Background} )`,
height: '100vh',
backgroundSize: 'cover'
}
// class component for our image on the home page
// the <br> needs fixing in the css file
class Header extends Component {
render() {
return (
<header style={headerStyle}>
<h1>Hashtag Hound </h1>
<p> Connecting influencers with brands </p>
<Link to="/signup">Find an Influencer</Link>
</header>
);
}
};
export default Header;
Here is the css for it
header {
margin: 0 auto;
text-align: center;
}
header h1 {
margin: 0;
font-family: arial;
font-size: 4rem;
color: #383636;
}
header p {
font-weight: 700;
font-size: 1.75rem;
font-family: arial;
color: #383636;
}
header a {
box-shadow: 0 3px 3px 0 rgb(0,0,0,1);
font-weight: 700;
font-size: 1.2rem;
background-color: black;
border-color: black;
color: white;
padding: 1.25rem 2.5rem;
border-radius: 2rem;
text-decoration: none;
font-family: arial;
display: inline-block;
}