Custom component not working

App Building
#1

image
image716×461 31.4 KB

Greetings I'm new to retool and I'm trying to create my custom component, and I'm having trouble creating a material-ui component and I want to know how to create it correctly so it can render as the material-ui page component.

(Also, the component I wanted to make was a navbar with a differente background color and that wasn't working for some reason)

is there anything missing?
Thanks beforehand.

#2

Hey er12, it looks like the screenshots that you shared are of the default display and values of the custom component, other than grabbing the AppBar component. Can you share how you otherwise altered the code?

#3

yes.
@joeBumbaca
I took the navBar from material-ui and pasted it like this

<style>
  body {
    margin: 0;
  }
</style>
<script src="https://cdn.tryretool.com/js/react.production.min.js" crossorigin></script>
<script src="https://cdn.tryretool.com/js/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.production.min.js"></script>


<div id="react"></div>

<script type="text/babel">
  const { Button, Card, CardContent, Box, AppBar, Toolbar, IconButton, MenuIcon, Typography} = window["material-ui"];

  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            CadenTest
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );

  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
  ReactDOM.render(<ConnectedComponent />, document.getElementById("react"));
</script>

And it doesn't render

image
image1704×741 135 KB

#4

Hey er12, you can try using different scripts for the materialUI cdn and potentially the React cdns as well. If that component is a newer component (newer than material UI 3.9), you would need the updated version. Newer versions of the material ui library would potentially require newer versions of React in order to work properly.

1 Like
#5

Noted! thank you for answering!!!
I got the documentation for v3 and it's working!

#6

Excellent! Glad to hear that it's working.

1 Like
#7

@er12 How you did this? Can You share your code? I am also trying to make custom component? Please do let me know?
(As I am trying to make menus for my application)