Реактивный стиль наведения не работает при использовании с Radium и Material-UI - PullRequest
Новая
       26

Реактивный стиль наведения не работает при использовании с Radium и Material-UI

0 голосов
/ 18 декабря 2018

Я использую библиотеку Radium для встроенного моделирования в реакции.Использование его отлично работает для других компонентов, но у меня возникают проблемы с компонентами Material-UI.Когда я наводю указатель мыши на бумагу, она не меняет цвет на зеленый.Что здесь не так?Как это исправить ?

import React, { Component, Fragment } from 'react';
import { Grid, GridList, Paper, ListItem, List, ListItemIcon, ListItemText } from '@material-ui/core';
import { connect } from 'react-redux';
import Radium from 'radium';

class AchievementsHome extends Component {

    render() {

        return <>
            <Grid container alignItems="center" direction="column">
                <h1>Achievements</h1>

                <Paper
                style={{backgroundColor:'red' , ':hover':{backgroundColor:'green' }}
                 >
                   <h1>Hi</h1>
                </Paper>
            </Grid>
        </>
    }
}

const mapStateToProps = (state) => {
    return {
        achievements: state.achievements
    }
}

export default connect(mapStateToProps)(Radium(AchievementsHome));

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Material UI предоставляет свой собственный стиль стилей с использованием CSS в JS (JSS). Он обеспечивает withStyles компонент более высокого порядка и withTheme и позволяет стилизовать на глобальном уровне темы.Вы также можете передать имена классов для некоторых компонентов для пользовательского стиля.

Вам не нужно использовать Radium для стилизации компонентов Material UI.

Кроме того, ваш селектор CSS для наведения мыши должен включать родительский CSSселектор: 

const paperStyle = {
  backgroundColor: 'red',
  '&:hover': {
    backgroundColor: 'green'
  }
}

return (
  <Paper styles={paperStyle}>
    <Typography variant="h1">Hi</Typography>
  </Paper>
);
0 голосов
/ 18 декабря 2018

С внешними стилями пользовательского интерфейса материалов (так что стили, не относящиеся непосредственно к библиотеке пользовательского интерфейса материалов) практически не работают, чтобы изменить цвет при наведении, вам нужно установить тему, как описано в разделе Темы docs

Сначала захватите импорт с помощью стилей и определите тему. 

import { withStyles } from "@material-ui/core/styles";


const customStyles = theme => ({
  root: {
    backgroundColor: "red",
    "&:hover": {
      backgroundColor: "green"
    }
  }
});

Чем определите новый компонент, обернутый с помощью стилей: 

const CustomPaper = withStyles(customStyles)(Paper);

При использовании для рендерингакомпонент, который вы определили: 

     <CustomPaper
     />

Надеюсь, это поможет.

...