-
Notifications
You must be signed in to change notification settings - Fork 19
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Problem setting component' property to a ReactElementType #67
Comments
I'm always confused where |
Hi, I got a working solution. It requires creating a function. Since I did not know what type the argument should be, I inserted a console.log in the function to see what was passed and then created the IPaperProps type. Edit: removed open Feliz
open HtmlEx
open Feliz.MaterialUI
type IPaperProps =
abstract member className: string
abstract member children: ReactElement []
let PaperComponent (props: IPaperProps) =
Mui.paper props.children
// https://material-ui.com/components/tables/#basic-table
let helptextElement2 =
Mui.tableContainer [
tableContainer.component' (Fable.React.ReactElementType.ofFunction PaperComponent)
tableContainer.children [
Mui.table [
table.size.small
table.children [
Mui.tableHead [
Mui.tableRow [
Mui.tableCell "col 1"
Mui.tableCell "col 2"
]
]
Mui.tableBody [
Mui.tableRow [
Mui.tableCell "lala"
Mui.tableCell "liauh"
]
]
]
]
]
] |
Yes, that seems like an ugly and brittle workaround. I think there are better ways, but I'm not sure how. Perhaps @Zaid-Ajaj or other Fable/React wizards know this? 🧙♂️ |
So I believe this would work: The library could be adjusted to have something like this: type MuiTypes =
static member inline paper : ReactElementType = importDefault "@material-ui/core/Paper" |
@Shmew thanks. That works, and using MuiTypes it looks nice. |
Does that work for you for any component you define? I haven't personally tried it, I don't think that will work with any imported components (which is why we need the MuiTypes here). |
@Shmew sorry I am not sure if I understand your question. By the way the version with MuiTypes compiles to MuiHelpers_createElement(TableContainer, [["component", Paper], ["children", reactApi.Children.toArray([MuiHelpers_createElement(Table, [["size", "small"], ["children", reactApi.Children.toArray([MuiHelpers_createElement(TableHead, [["children", reactApi.Children.toArray([MuiHelpers_createElement(TableRow, [["children", reactApi.Children.toArray([MuiHelpers_createElement(TableCell, [["children", "Command"]]), MuiHelpers_createElement(TableCell, [["children", "Keybinding"]]), MuiHelpers_createElement(TableCell, [["children", "When"]])])]])])]]), MuiHelpers_createElement(TableBody, [["children", reactApi.Children.toArray([MuiHelpers_createElement(TableRow, [["children", reactApi.Children.toArray([MuiHelpers_createElement(TableCell, [["children", reactApi.Children.toArray([(() => { Paper is declared in Paper.d.ts as I like the MuiTypes approach. Though I am thinking if it could be more easily discoverable. tableContainer.component' Mui.Paper Instead of tableContainer.component' MuiTypes.Paper But that would mean that for every "component'" method there needs to be an additional overload that does some conversion. The following alternatives may also be worth to consider: |
Yeah the issue is |
Adding a Will probably do this at some point if no-one picks up this torch, but it'll be done sooner if someone can help me out with these clarifications. |
The component' property accepts a string or a ReactElementType.
I want to set the component' property of tableContainer to Mui.paper. The code below compiles but then I the following error in the console
The generated JavaScript is:
The F# code is:
It would be nice if somebody could help me with the problem.
The text was updated successfully, but these errors were encountered: