JavaScript @material-ui/styles/makeStylesの例

コード例 #1

ファイル: set_language.js プロジェクト: iannar/iannar.github.io

import makeStyles from '@material-ui/styles/makeStyles';
import {setLanguage} from '../../actions/settings';

const mapStateToProps = (state) => ({
  language: state.settings.language,
});

const mapDispatchToProps = (dispatch) => ({
  onChangeLanguage: (language) => {
    dispatch(setLanguage(language));
  },
});

const useStyles = makeStyles((theme) => ({
  root: {
    padding: theme.spacing(1),
  },
}));

const SetLanguage = (props) => {
  const {onChangeLanguage, language} = props;
  const classes = useStyles;
  const {t, i18n} = useTranslation('settings');
  const handleChangeLanguage = (e) => {
    const language = e.target.value;
    i18n.changeLanguage(language);
    onChangeLanguage(language);
  };
  return (
    <div className={classes.root}>
      <FormControl component='fieldset'>

コード例 #2

ファイル: mass_card.js プロジェクト: iannar/iannar.github.io

const useStyles = makeStyles((theme) => ({
  root: {
    padding: theme.spacing(1),
  },
  avatar: {
    'backgroundColor': theme.palette.secondary.main,
    '&:hover': {
      backgroundColor: theme.palette.primary.main,
    },
  },
  cardHeader: {
    cursor: 'pointer',
  },
  expand: {
    transform: 'rotate(0deg)',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: 'rotate(180deg)',
  },
  list: {
    width: theme.spacing(30),
  },
  listItem: {
    textAlign: 'center',
  },
}));

コード例 #3

ファイル: brand.js プロジェクト: iannar/iannar.github.io

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {Link} from 'react-router-dom';
import Typography from '@material-ui/core/Typography';
import {getMetadata} from '../utils';
import makeStyles from '@material-ui/styles/makeStyles';

const useStyles = makeStyles((theme) => ({
  root: {
    color: theme.palette.primary.contrastText,
    textDecoration: 'none',
  },
}));

export default function Brand(props) {
  const {className: classNameProp, color, ...rest} = props;
  const classes = useStyles();
  const className = classNames(
      classes.root,
      classNameProp,
  );
  return (
    <Link className={className} to='/' {...rest}>
      <Typography color={color} variant='h6'>
        {getMetadata('brand')}
      </Typography>
    </Link>
  );
}

コード例 #4

ファイル: mass_list.js プロジェクト: iannar/iannar.github.io

const mapStateToProps = (state) => ({
  data: state.mass.data,
  page: state.mass.page,
});

const mapDispatchToProps = {
  fetchMasses,
  fetchNextMasses,
};

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
  },
  buttonContainer: {
    display: 'flex',
    justifyContent: 'space-between',
    padding: theme.spacing(1),
  },
}));

const MassList = (props) => {
  const {data, fetchMasses, fetchNextMasses, page, showNext} = props;
  const classes = useStyles();
  const {t} = useTranslation('mass');
  const handlePreviousPageClick = () => {
    fetchMasses(page - 1 || 1);
  };
  const handleNextPageClick = () => {
    fetchMasses(page + 1 || 1);

コード例 #5

ファイル: church_map.js プロジェクト: iannar/iannar.github.io

const mapStateToProps = (state) => ({
  amapkey: state.settings.amapkey,
  mapCenter: state.settings.mapCenter,
  data: state.church.data,
});

const mapDispatchToProps = (dispatch) => ({
  fetchAllChurches: () => {
    dispatch(fetchAllChurches());
  },
});

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    height: '100%',
  },
}));

const ChurchMap = (props) => {
  const {amapkey, data, mapCenter, fetchAllChurches} = props;
  const classes = useStyles();
  const center = {
    longitude: mapCenter[0],
    latitude: mapCenter[1],
  };
  const plugins = ['ToolBar'];
  const markers = data && data.length ? data.map((item) => ({
    position: {
      longitude: item.longitude,
      latitude: item.latitude,