2

Hi, I want to create a native app with white labelling. The initial approach I followed is associated each “company” with a “logo” created custom styles for each brand in the styles/native/app/custom.js file  created a snippet that I include in the page layout, which includes a) the logo (the correct logo for each user is retrieved by nanoflow, based on the user’s “company” and b) a dynamic classe expression that applies the correct class depending on the user’s company.   This works as expected. However my customer needs to add some styles in the custom.js file for every new customer, and create a new deployment. To solve this problem, I am wondering if there is create a custom component that could wrap around elements in my page. Using react-jss library, this custom component could create classes and pass them on to its children components.  Something like this:  import { createUseStyles } from 'react-jss';   function App() {   return (     <WrapperWidget brand={{ divColor: 'blue', spanColor: 'red' }}>       <Content />     </WrapperWidget>   ); }   export default App;   const WrapperWidget = ({ children, brand }) => {   const useStyles = createUseStyles({     customBrand: {       '& div': {         backgroundColor: brand.divColor,       },       '& span': {         backgroundColor: brand.spanColor,       },     },   });   const classes = useStyles();   return <div className={classes.customBrand}>{children}</div>; };   const Content = () => {   return (     <div>       <h1>Some text</h1>       <span>hello</span>     </div>   ); }; Question is, is there any way in Mendix to wrap a component around another? 

asked 2020-12-08

2 answers