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

2 回答

• 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 创建一个新的主题提供程序实例 . 然后需要包装实际的组件代码，这就是为什么我选择创建一个"container"组件和实际组件作为单独的组件，这样我就可以保持逻辑分离 . 另外，如果我这样选择的话，这仍然允许我让一个无状态而另一个不能

  回复于 2024-05-03T07:24:59+08:00
• 0

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

  回复于 2024-05-03T07:24:59+08:00