material-dashboard icon indicating copy to clipboard operation
material-dashboard copied to clipboard

How can i merge multi styles into one another new style?

Open 12343954 opened this issue 4 years ago • 1 comments

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • [×] I am running the latest version
  • [√] I checked the documentation and found no answer
  • [√] I checked to make sure that this issue has not already been filed
  • [?] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

//assets/jss/views/myCustomStyle.jsx

import extendedTablesStyle from './extendedTablesStyle.jsx'
import modalStyle from "../modalStyle.jsx";
import notificationsStyle from './notificationsStyle.jsx'

const myCustomStyle= theme => ({
    ...extendedTablesStyle(theme),
    ...notificationsStyle(theme),
    ...modalStyle(theme)
});

export default myCustomStyle;

// my view code:

import myCustomStylefrom '../../assets/jss/material-dashboard-pro-react/views/myCustomStyle.jsx'

class MyCustomView extends React.Component {
...
}
export default withStyles(myCustomStyle)(MyCustomView);

Please describe the behavior you are expecting

Current Behavior

What is the current behavior?

Failure Information (for bugs)

TypeError: Object(...) is not a function
myCustomStyle

const myCustomStyle= theme => ({    // <-- error here

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. step 1
  2. step 2
  3. you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

  • Device: PC
  • Operating System: Windows 10
  • Browser and Version: Chrome 78

Failure Logs

Please include any relevant log snippets or files here.

12343954 avatar Nov 23 '19 15:11 12343954

oh! my fault! didn't look at the code carefully!

some styles need 'theme',but some no need

so those need 'theme' styles must pass the (theme), so those no need 'theme' styles no need pass the (theme)

so, coding like this, it works!

import extendedTablesStyle from './extendedTablesStyle.jsx'
import notificationsStyle from './notificationsStyle.jsx'
// import modalStyle from "../modalStyle.jsx";


const myCustomStyle= theme => ({
    ...notificationsStyle(theme),      // in notificationsStyle, include 'modalStyle' need (theme), 
    ...extendedTablesStyle 
});

export default myCustomStyle;

12343954 avatar Nov 23 '19 16:11 12343954