Use style hook

This commit is contained in:
Krzysztof Bialoglowicz 2019-08-30 13:58:48 +02:00
parent f3382fa544
commit 904f403b0c
2 changed files with 94 additions and 98 deletions

View file

@ -1,7 +1,7 @@
import Card from "@material-ui/core/Card"; import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent"; import CardContent from "@material-ui/core/CardContent";
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import makeStyles from "@material-ui/styles/makeStyles";
import React from "react"; import React from "react";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
@ -18,7 +18,7 @@ interface PluginInfoProps {
onChange: (event: React.ChangeEvent<any>) => void; onChange: (event: React.ChangeEvent<any>) => void;
} }
const styles = createStyles({ const useStyles = makeStyles(() => ({
status: { status: {
paddingTop: 20 paddingTop: 20
}, },
@ -26,16 +26,15 @@ const styles = createStyles({
fontSize: 14, fontSize: 14,
paddingTop: 10 paddingTop: 10
} }
}); }));
const PluginInfo = withStyles(styles, { name: "PluginInfo" })( const PluginInfo: React.StatelessComponent<PluginInfoProps> = ({
({
data, data,
description, description,
name, name,
classes,
onChange onChange
}: PluginInfoProps & WithStyles<typeof styles>) => { }) => {
const classes = useStyles({});
return ( return (
<Card> <Card>
<CardTitle <CardTitle
@ -68,7 +67,6 @@ const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
</CardContent> </CardContent>
</Card> </Card>
); );
} };
);
PluginInfo.displayName = "PluginInfo"; PluginInfo.displayName = "PluginInfo";
export default PluginInfo; export default PluginInfo;

View file

@ -1,7 +1,7 @@
import Card from "@material-ui/core/Card"; import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent"; import CardContent from "@material-ui/core/CardContent";
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import makeStyles from "@material-ui/styles/makeStyles";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ControlledSwitch from "@saleor/components/ControlledSwitch"; import ControlledSwitch from "@saleor/components/ControlledSwitch";
import { FormErrors } from "@saleor/types"; import { FormErrors } from "@saleor/types";
@ -24,22 +24,21 @@ interface PluginSettingsProps {
}>; }>;
} }
const styles = createStyles({ const useStyles = makeStyles(() => ({
item: { item: {
paddingBottom: 10, paddingBottom: 10,
paddingTop: 10 paddingTop: 10
} }
}); }));
const PluginSettings = withStyles(styles, { name: "PluginSettings" })( const PluginSettings: React.StatelessComponent<PluginSettingsProps> = ({
({
data, data,
disabled, disabled,
classes,
errors, errors,
onChange, onChange,
plugin plugin
}: PluginSettingsProps & WithStyles<typeof styles>) => { }) => {
const classes = useStyles({});
return ( return (
<Card> <Card>
<CardTitle <CardTitle
@ -80,7 +79,6 @@ const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
</CardContent> </CardContent>
</Card> </Card>
); );
} };
);
PluginSettings.displayName = "PluginSettings"; PluginSettings.displayName = "PluginSettings";
export default PluginSettings; export default PluginSettings;