Ability to customize CSS class names? about react-panelgroup HOT 4 OPEN

Best way of handling it would be a classes prop that allows you to pass in what css class you want.

<PanelGroup classes={{divider: 'my-divider', panel: 'whoopwhoop'}}/>

This works really well with css-modules too.

.divider {
  background: blue;
}

import classes from './styles.css'
....
<PanelGroup classes={classes}/>

from react-panelgroup.

This is something I would like too, although for a slightly different reason.

If a panelWidth resize is set to "fixed", the cursor for the divider is still set to "row-resize" or "column-resize" depending on the direction.

Ideally, the cursor should not change to indicate that resize is possible when it is not.

However, having the ability to propagate our own styles or classes to each panel would enable us to solve this ourselves.

Perhaps something like;

<PanelGroup direction='column' borderColor: '#333' panelWidths={ [
  { size: 28, resize: 'fixed', className: 'example-fixed-panel' }, 
  { resize: 'dynamic' }] 
}>
  <div>Fixed Panel with no resize cursor on the divider</div>
  <div>Dynamic Panel</div>
</PanelGroup>

from react-panelgroup.

bump, with the addition that the divider currently has style directly in the element. It'd be a lot better to have it defined in a separate CSS file, so that way it could be overwritten by my own css. as it stands, i think i'd have to use !important or fork my own panel group.

from react-panelgroup.

Best way of handling it would be a classes prop that allows you to pass in what css class you want.

<PanelGroup classes={{divider: 'my-divider', panel: 'whoopwhoop'}}/>

This works really well with css-modules too.

.divider {
  background: blue;
}

import classes from './styles.css'
....
<PanelGroup classes={classes}/>

Hi@JonDum, CSS/Styles sheet worked for color though not width, and trying to override the styles with jss and no luck. Any ideas?

import withStyles from '@material-ui/core/styles/withStyles';
import React from 'react';
import ReactPanelGroup from 'react-panelgroup';

// import classes from './styles.css';

const styles = {
  divider: {
    width: 3,
    background: 'green !important',
    '&:hover': 'pink',
  },
};

const PanelGroup = ({ children, classes }) => {
  return (
    <ReactPanelGroup
      classes={{
        divider: classes.divider,
      }}
    >
      {children}
    </ReactPanelGroup>
  );
};

export default withStyles(styles)(PanelGroup);

from react-panelgroup.