Devextreme-reactive: [Bug] Column resize handles are invisible

[thehig]

• [X] I have searched this repository's issues and believe that this is not a duplicate.

Current Behaviour

I have created a Table using the that implements Column Resizing. Column resizing behaves normally except the resize handles are invisible.

Expected Behaviour

• The resize handles become visible when the user hovers over the table header row.
• The resize handles are visible when the user is resizing columns

Steps to Reproduce (for Bugs)

Example, forked from here

Your Environment

Snipped from package.json

"@devexpress/dx-core": "^1.3.0",
"@devexpress/dx-grid-core": "^1.3.0",
"@devexpress/dx-react-core": "^1.3.0",
"@devexpress/dx-react-grid": "^1.3.0",
"@devexpress/dx-react-grid-material-ui": "^1.3.0",
"@material-ui/core": "^1.2.0",
"jss": "^9.8.2",
"react": "^16.4.0",

[MaximKudriavtsev]

Hi,

Thank you for your feedback. To solve this problem, you can add the ThemeProvider component.

Please follow this example for detailed information.

[thehig]

Thanks for the reply. I already have a theme provider in my application but the handles are still invisible

[MaximKudriavtsev]

Make sure that you specify a primary color for your theme.

const myTheme = createMuiTheme({ palette: { type: "light", primary: blue } });

[thehig]

Thanks again for the reply, but I definitely have a primary color set

[MaximKudriavtsev]

Does your theme contain this color?

[thehig]

Ah-ha, thats a good lead. I'll check it out, thanks

[thehig]

Yes this looks like it could be the source of the issue. My theme is set up to use a single hex color as Primary, and infer the other colors from there.

See "Providing the colors directly" here

edit: Yep, palette.primary[300] is undefined
edit: I suggest using something like using the theme getContrast against one of the palette properties thats guaranteed to be there

[thehig]

I'm just coming back around to this now, is there any way to fix this without redefining how my applications colors are being generated?

[MaximKudriavtsev]

No. You should define the grid's theme as follows:

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { blue } from '@material-ui/core/colors';

const lightTheme = createMuiTheme({
  palette: {
    type: 'light',
    primary: blue,
  },
});

const GridWrapper = ({ children }) => (
  <MuiThemeProvider theme={lightTheme}>
    {children}
  </MuiThemeProvider>
);

[thehig]

That totally wrecked my app's theme, but led me to a workaround:

const theme = createMuiTheme(themeSource);

theme.palette.primary[300] = theme.palette.getContrastText(
  theme.palette.background.default
);

Thanks for the assistance

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.