@material-ui/core/styles#Theme JavaScript Examples
The following examples show how to use
@material-ui/core/styles#Theme.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: GrantsPageStyles.jsx From grants-fe with MIT License | 6 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
maxWidth: 1345,
background: color.accent,
},
container: {
padding: "50px 0 0 0",
width: "80%",
margin: "auto",
},
appHeader: {},
})
)
Example #2
| Source File: EventLogs.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
StyledTableCell = withStyles((theme: Theme) =>
createStyles({
head: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
},
body: {
fontSize: 14,
},
}),
)(TableCell)
Example #3
| Source File: EventLogs.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
StyledTableRow = withStyles((theme: Theme) =>
createStyles({
root: {
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
},
}),
)(TableRow)
Example #4
| Source File: OrderInfo.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
},
paper: {
margin: theme.spacing(1),
padding: theme.spacing(2)
},
text: {
margin: theme.spacing(2),
}
}),
)
Example #5
| Source File: OrderItems.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
},
table: {
minWidth: 500,
width: '95%',
margin: 'auto',
},
paper: {
margin: theme.spacing(1),
padding: theme.spacing(1)
},
})
)
Example #6
| Source File: Search.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
padding: '2px 4px',
display: 'flex',
alignItems: 'center',
width: 400,
},
input: {
marginLeft: theme.spacing(1),
flex: 1,
},
iconButton: {
padding: 10,
},
divider: {
height: 28,
margin: 4,
},
}),
)
Example #7
| Source File: Stepper.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
},
paper: {
margin: theme.spacing(1),
padding: theme.spacing(2)
},
instructions: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
},
}),
)
Example #8
| Source File: WeatherIcon.js From DMS_React with GNU Affero General Public License v3.0 | 5 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
cardMedia: {
height: 150
}
}),
)
Example #9
| Source File: stateTable.jsx From CovidIndiaStats with MIT License | 4 votes |
|
render() {
const {
requiredData,
requiredState,
back,
sortConfirmed,
sortActive,
sortRecovered,
sortDeceased,
sortOrder,
} = this.state;
if (requiredData.length) {
if (sortConfirmed) {
requiredData[0].sort(function (x, y) {
return sortOrder
? Number(y.confirmed) - Number(x.confirmed)
: Number(x.confirmed) - Number(y.confirmed);
});
}
if (sortActive) {
requiredData[0].sort(function (x, y) {
return !sortOrder
? Number(y.active) - Number(x.active)
: Number(x.active) - Number(y.active);
});
}
if (sortRecovered) {
requiredData[0].sort(function (x, y) {
return !sortOrder
? Number(y.recovered) - Number(x.recovered)
: Number(x.recovered) - Number(y.recovered);
});
}
if (sortDeceased) {
requiredData[0].sort(function (x, y) {
return !sortOrder
? Number(y.deceased) - Number(x.deceased)
: Number(x.deceased) - Number(y.deceased);
});
}
}
const useStylesBootstrap = makeStyles((theme: Theme) => ({
arrow: {
color: theme.palette.common.black,
},
tooltip: {
backgroundColor: theme.palette.common.black,
},
}));
function BootstrapTooltip(props: TooltipProps) {
const classes = useStylesBootstrap();
return (
<Tooltip disableTouchListener arrow classes={classes} {...props} />
);
}
const stateFullName = {
AP: "Andhra Pradesh",
AN: "A & N Islands",
AR: "Arunachal Pradesh",
AS: "Assam",
BR: "Bihar",
CH: "Chandigarh",
CT: "Chattisgarh",
DN: "DNH DU",
DL: "Delhi",
GA: "Goa",
GJ: "Gujarat",
HP: "Himachal Pradesh",
HR: "Haryana",
JH: "Jharkhand",
JK: "Jammu & Kashmir",
KA: "Karnataka",
KL: "Kerala",
LA: "Ladakh",
LD: "Lakshadweep",
MH: "Maharashtra",
ML: "Meghalaya",
MN: "Manipur",
MP: "Madhya Pradesh",
MZ: "Mizoram",
NL: "Nagaland",
OR: "Odisha",
PB: "Punjab",
PY: "Puducherry",
RJ: "Rajasthan",
SK: "Sikkim",
TG: "Telangana",
TN: "Tamil Nadu",
TR: "Tripura",
UP: "Uttar Pradesh",
UT: "Uttarakhand",
WB: "West Bengal",
};
return (
<React.Fragment>
<div
className="row fadeInUp"
style={{
alignItems: "center",
alignContent: "center",
animationDelay: "1.8s",
marginBottom: "12px",
}}
>
<StatePicker handleStateChange={this.handleStateChange} back={back} />
</div>
<div className="w-100"></div>
<div className="w-100"></div>
{requiredData.length && back ? (
<div className="row">
<div className="col-10 fadeInUp" style={{ animationDelay: "0.3s" }}>
<button
className="btnMainPage btn"
style={{
textAlign: "center",
color: "rgba(255, 100, 0, 1)",
backgroundColor: "rgba(255, 153, 0, 0.3)",
width: 300,
fontWeight: 600,
fontSize: 12,
alignContent: "center",
textDecoration: "none",
marginBottom: 10,
marginTop: -15,
}}
>
<Link
className="visitState"
key={requiredState}
to={`/${requiredState}`}
>
<span className="viewState">
VISIT {stateFullName[requiredState]} MAIN PAGE
</span>
</Link>
</button>
</div>
<div className="col-2 fadeInUp" style={{ animationDelay: "0.35s" }}>
<h6
className="backButton"
onClick={() => {
this.setState({
back: false,
});
}}
>
HIDE
</h6>
</div>
</div>
) : (
""
)}
<div className="w-100"></div>
{requiredData.length && back ? (
<div className="row fadeInUp" style={{ animationDelay: "0.5s" }}>
<table
className="table table-sm table-borderless"
style={{
minWidth: "350px",
tableLayout: "fixed",
width: "100%",
marginBottom: "-15px",
marginTop: "-20px",
}}
align="center"
>
<thead className="thead-dark">
<tr>
<th className="th wideRow sticky-top" id="line1">
DISTRICT
</th>
<th
className="th sticky-top"
id="line2"
style={{ width: "175px" }}
>
DISTRICT
</th>
<th
className="th sticky-top text-info"
style={{ textAlign: "center" }}
onClick={() =>
this.setState({
sortConfirmed: true,
sortActive: false,
sortRecovered: false,
sortDeceased: false,
sortOrder: !sortOrder,
})
}
>
CONFIRMED
</th>
<th
className="th sticky-top narrowRow"
style={{ color: "rgb(255, 68, 106)", textAlign: "center" }}
onClick={() =>
this.setState({
sortConfirmed: false,
sortActive: true,
sortRecovered: false,
sortDeceased: false,
sortOrder: !sortOrder,
})
}
>
ACTIVE
</th>
<th
className="th sticky-top text-success"
style={{ textAlign: "center" }}
onClick={() =>
this.setState({
sortConfirmed: false,
sortActive: false,
sortRecovered: true,
sortDeceased: false,
sortOrder: !sortOrder,
})
}
>
RECOVERED
</th>
<th
className="th sticky-top narrowRow text-secondary"
id="line1"
style={{ textAlign: "center" }}
onClick={() =>
this.setState({
sortConfirmed: false,
sortActive: false,
sortRecovered: false,
sortDeceased: true,
sortOrder: !sortOrder,
})
}
>
DEATHS
</th>
<th
className="th sticky-top text-secondary"
id="line2"
style={{ textAlign: "center", width: "70px" }}
onClick={() =>
this.setState({
sortConfirmed: false,
sortActive: false,
sortRecovered: false,
sortDeceased: true,
sortOrder: !sortOrder,
})
}
>
DECEASED
</th>
</tr>
</thead>
<tbody className="tbody">
{requiredData.map((item) =>
item.map((district) => (
<tr className="tr">
<td
className="tdleft align-middle"
style={{
color: "grey",
backgroundColor: "rgba(63, 63, 95, 0.2)",
}}
>
{district.district}
{district.notes ? (
<BootstrapTooltip title={parse(district.notes)}>
<span style={{ verticalAlign: "0.05rem" }}>
<InfoTwoToneIcon
color="inherit"
fontSize="inherit"
/>
</span>
</BootstrapTooltip>
) : (
""
)}
</td>
<td
className="delta td text-secondary align-middle"
style={{ textAlign: "right" }}
>
<span className="arrowup text-info">
<DeltaArrow
deltaType={district.delta.confirmed}
color={"#42b3f4"}
/>
<DeltaValue deltaType={district.delta.confirmed} />
</span>
{commaSeperated(district.confirmed)}
</td>
<td
className="delta td text-secondary narrowRow align-middle"
style={{ textAlign: "right" }}
>
{Number(district.active) > 0
? commaSeperated(district.active)
: Number(district.active) < 0
? "-" + commaSeperated(Math.abs(district.active))
: "-"}
</td>
<td
className="delta td text-secondary align-middle"
style={{ textAlign: "right" }}
>
<span className="arrowup text-success">
<DeltaArrow
deltaType={district.delta.recovered}
color={"#28a745"}
/>
<DeltaValue deltaType={district.delta.recovered} />
</span>
{Number(district.recovered)
? commaSeperated(district.recovered)
: "-"}
</td>
<td
className="delta td text-secondary narrowRow align-middle"
style={{ textAlign: "right" }}
>
<span className="arrowup text-secondary">
<DeltaArrow
deltaType={district.delta.deceased}
color={"#6c757d"}
/>
<DeltaValue deltaType={district.delta.deceased} />
</span>
{Number(district.deceased)
? commaSeperated(district.deceased)
: "-"}
</td>
</tr>
))
)}
</tbody>
</table>
</div>
) : (
""
)}
</React.Fragment>
);
}
