Question

我在关于如何使其发挥作用的文档后遇到了一些麻烦

我有一个创建了一些样式的组件，在大多数情况下，所有这些样式都将应用于呈现此组件的任何位置但有时取决于应用程序路由到哪个页面我将要更改整体高度这些页面上的组件。我想我可以通过传递一些新的高度道具来实现这一点，以遵循更主题的中心方法。如何使用我当前的设置？

样式文件

const styles = theme => ({
  root: {
    backgroundSize: 'cover',
    padding: '25px 20px',
    boxSizing: 'border-box',
    backgroundPosition: '50% 0',
    backgroundColor: 'rgba(40,70,94,.7)',
    backgroundBlendMode: 'multiply',
    ...theme.root
  }
});

export default styles;

组件文件

import React from 'react';
import styles from './EventTop.styles';
import injectSheet, { ThemeProvider } from 'react-jss';

const EventTop = (props) => (
  <ThemeProvider theme={props.theme}>
    <aside className={props.classes.root} style={{ backgroundImage: `url(${props.event.event_logo})` }}>
      <div className="wrapper">
        <div className="event-info">
          <span className="event-time">
            7:00 PM
          </span>
          <span className="event-date">
            27 Jun 2020
          </span>
          <span className="event-end-time">
            Ends at 10:00 PM
          </span>
          <span className="event-title">
            Bidr Gala
          </span>
          <span className="event-attire">
            Cocktail Attire
          </span>
        </div>
      </div>
    </aside>
  </ThemeProvider>
);

export default injectSheet(styles)(EventTop);

然后当我渲染它时，我想象了这样的东西

<EventTop event={this.props.events.currentEvent} theme={{ height: 'calc(100vh - 64px)' }}/>

但是当我尝试控制台注销时，主题传递给了样式生成器，我没有看到主题进入。

我安装了Material UI，整个应用都包含在MuiThemeProvider

中

<Provider store={store}>
  <MuiThemeProvider theme={theme}>
    <App>
      <Reboot />
      <AppRouter />
    </App>
  </MuiThemeProvider>
</Provider>

这是我实际看到的主题主题而不是我自己在其中合并的主题。

Answer 1

以下是我如何使用

首先，我将无状态组件移动到新文件

EventTop.component.jsx

import React from 'react';
import Moment from 'react-moment';
import styles from './EventTop.styles';

import themableWrapper from '../Themable';

const EventTopComponent = (props) => (
  <aside className={props.classes.root} style={{ backgroundImage: `url(${props.event.event_logo})` }}>
    <div className="wrapper">
      <div className={props.classes.eventInfo}>
        <span className={props.classes.eventTime}>
          <Moment parse="HH:mm:ss" format="h:mm A">{props.event.start_time}</Moment>
        </span>
        <span className={props.classes.eventDate}>
          <Moment parse="YYYY-MM-DD" format="D MMM YYYY">{props.event.event_date}</Moment>
        </span>
        <span className={props.classes.eventEndTime}>
          Ends at <Moment parse="HH:mm:ss" format="h:mm A">{props.event.end_time}</Moment>
        </span>
        <span className={props.classes.eventTitle}>
          {props.event.auction_title}
        </span>
        <span className={props.classes.eventAttire}>
          {props.event.attire}
        </span>
      </div>
    </div>
  </aside>
);

export default themableWrapper(styles)(EventTopComponent);

然后在EventTop.jsx我导入无状态组件并返回另一个无状态组件，但是这个组件包含在一个新的可用包装器中

import React from 'react';
import EventTopComponent from './EventTop.component';

import { Themable } from '../Themable';

const EventTop = ({ theme, ...rest }) => (
  <Themable theme={theme}>
    <EventTopComponent {...rest} />
  </Themable>
);

export default EventTop;

在新的可安装文件中，我有一些导出设置

import injectSheet, { createTheming } from 'react-jss';

export const theming = createTheming('__NEW_THEME_NAMESPACE__');
export const { ThemeProvider: Themable } = theming;

export default (styles) => injectSheet(styles, { theming });

然后在样式生成器中，我可以使用lodash之类的东西将我的传入主题与默认样式设置合并

EventTop.styles.js

import { merge } from 'lodash';

const styles = theme => {
  return merge({
    root: {
      backgroundSize: 'cover',
      padding: '25px 20px',
      boxSizing: 'border-box',
      backgroundPosition: '50% 0',
      backgroundColor: 'rgba(40,70,94,.7)',
      backgroundBlendMode: 'multiply',
    },
    eventInfo: {
      flexGrow: '1',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-end',
      textAlign: 'left',
      paddingTop: '20px',
      fontWeight: '700',
      color: 'white'
    },
    eventTime: {
      fontSize: '55px'
    },
    eventDate: {
      fontSize: '43px'
    },
    eventEndTime: {
      fontSize: '30px'
    },
    eventTitle: {
      fontSize: '70px'
    },
    eventAttire: {
      fontSize: '30px'
    }
  }, theme);
};

export default styles;

为了使MuiThemeProvider包装整个应用程序，我必须设置一个新的命名空间，然后使用createTheme创建一个新的主题提供者实例。然后需要包装实际的组件代码，这就是为什么我选择创建一个＆＃34;容器＆＃34;组件和实际组件作为单独的部分，所以我可以保持逻辑分离。此外，如果我选择

，这仍然允许我让一个无状态，另一个不允许

Answer 2

你混淆了MuiThemeProvider和react-jss中的那个。

使用JSS创建可主题的反应组件

2 个答案: