Постоянная переменная со стилевыми классами не работает в реакции

Question

Я работал с реагировать на js, чтобы создать интерфейс с картами.Между тем я столкнулся с проблемой, что

Я был совершенно не в состоянии использовать классы стилевого оформления с моим кодом

Я написал код в js-файле с именем card.js для создания некоторых классов таблиц стилей, и код похож на приведенный ниже.

import React from 'react';
const Color = {"default" : "#ffff","grey": "#808080"};
export const styles = theme=>({
    card:
    {
        width: "400px",
        height: "600px",
        backgroundColor: Color.default,
        borderRadius: "5px",
        border: "1px solid"+Color.grey,
    }
});

Я импортировал экспортированные стили в файл с именем Activity.js со следующим кодом.

import React from 'react';
import {styles} from './card';
var Activity = (props)=>{
    return(
        <div>
            <h1 className={styles.card}>Card 1</h1>
            <h1 className={styles.card}>Card 2</h1>
        </div>
    );
}
export default Activity;

здесь стили не добавляются в теги h1.Я застрял, пожалуйста, помогите мне.

Answer 1

Использование опции withStyles из '@ material-ui / styles' - вариант. Пример, показанный в URL ниже:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const styles = {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
};

function HigherOrderComponent(props) {
  const { classes } = props;
  return <Button className={classes.root}>Higher-order component</Button>;
}

HigherOrderComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(HigherOrderComponent);