Customize cliqz-component

[mai-cliqz]

import React from 'react';
import { MovieShowtimes as Showtimes } from '@cliqz/component-ui-movie-showtimes';
import { useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';

const match = (query) => useMediaQuery(query);

const styles = (theme) => ({
  cinemaContainer: {
    maxWidth: theme.consts.CONTAINER_MAX_WIDTH,
    alignItems: match([theme.breakpoints.down('sm')]) ? 'center' : 'flex-start',
  },
  cinemaAddressText: {
    color: theme.palette.grey.primary,
    fontSize: theme.typography.h2,
    fontWeight: 600, // New property
  }
});

export default function MovieShowtimes(props) {
  const theme = useTheme();
  
  return (
    <div>
      <Showtimes data={props.result} styles={styles(theme)} />
    </div>
  );
}

[chrmod]

I don't think you can use theme.breakpoints. as styles will be passed to Stylesheet.create which does not support media queries. You should rather pass exact value to style property based on current size.

const styles = (theme) => ({
  cinemaContainer: {
    maxWidth: theme.consts.CONTAINER_MAX_WIDTH,
    alignItems: theme.dimensions === 'sm' ? 'flex-start' : 'center',
  }
};

I don't know MUI but I assume there is some way to check dimensions like theme.dimensions === 'sm'

[mai-cliqz]

Just updated it to make use of useMediaQuery. For now we pass exact value only