cca-io / rescript-mui Goto Github PK
View Code? Open in Web Editor NEWReScript bindings for MUI
License: MIT License
ReScript bindings for MUI
License: MIT License
Just wanted to double check that I am not missing anything: at the moment, bs-material-ui does not include bindings to the Material-ui-icons, right? (i.e. https://github.com/mui-org/material-ui/tree/master/packages/material-ui-icons )
Do you consider this as something you want to add later, of something better suited for a stand-alone package? If there is interest to add this, I will try and have a look to see if the codegen approach you used would work to generate these bindings as well.
My main goal is converting some of the Material-UI docs and code examples to ReasonML, and the icons + theme support seem to be the main showstoppers right now.
I believe nativeColor
should be changed to htmlColor
. I'm on hooks branch and haven't checked master.
I was wondering whether pseudo selectors are supported in the ppx.
When using material-ui
, you can do:
container: {
'&:hover': {
background: "#fff",
},
}
but I couldn't find any similar examples in the repository.
Thanks!
Can't run the bucklescript compiler after installing this library.
Running version
▶ bsb -v
3.1.5
We've found a bug for you!
.../node_modules/@jsiebern/bs-material-ui/src/MaterialUi_Menu.re 14:10-17
12 ┆ switch (
13 ┆ obj
14 ┆ |. enterGet
15 ┆ |. Belt.Option.map(v => MaterialUi_Helpers.unwrapValue(v))
16 ┆ ) {
The value enterGet can't be found
Hint: Did you mean enter?
at Array.map (<anonymous>)i_Input.cmj
Adding just one icon to my project makes my production* bundle size increase by 3Mb.
After inspecting my bundle I noticed it contains all the icons, not just the one I'm using. My guess is that the dynamic nature of the MaterialUi_Icons component makes three shaking impossible.
MaterialUi_Icons.re
[@bs.module]
external iconClasses: Js.Dict.t(ReasonReact.reactClass) =
"@material-ui/icons";
...
ReasonReact.wrapJsForReason(
~reactClass=
iconClasses->Js.Dict.unsafeGet(icon->MaterialUi_IconsNames.tToJs),
...
Do you have the same issue? Any advise on how to deal with this problem?
Best and thank you for your hard work!
*when using webpack (in production mode) no extra plugins.
Reference: https://material-ui.com/guides/api/#spread
My specific use-case was attaching ARIA properties to a button. In React, these would filter down to the <button>
element ultimately and just work. The strict typing gets in the way a little here. Perhaps all the components should inherit the props from ReactDOMRe.props
and then extend from there?
It feels like #27 is related to this too.
I am attempting to use bs-material-ui-ppx
on Windows 10, but cant seem to make it work without hacking it up. With a stock install of the package, and adding "ppx-flags": ["@jsiebern/bs-material-ui-ppx/ppx"]
, to my bsconfig.json
I get this error message when compiling:
'{bs-material-ui-ppx-path}\ppx' is not recognized as an internal or external command
However, if I move the ppx file to ppx.exe, and change the ppx-flags path to end with .exe
it works.
Hey @jsiebern,
Great work as always, I'm really enjoying the new improvements in the library. I've recently upgraded from from 0.1.6
to 0.2.0
and was able to migrate everything rather seamlessly aside from a few things that are puzzling me. I'm currently building out some cascading menus so I'm making use of the properties transformOrigin
and anchorOrigin
, previously I was able to set values like:
<MaterialUi.Menu
transformOrigin={horizontal: int, vertical: int}
anchorOrigin={horizontal: int, vertical: int}
...
/>
however with the new type signatures, these values no longer work - it looks like you're moving towards using the enums/variant values which I very much agree with, but even attempting to pass record with something like: {horizontal:
Left, vertical: Center}
I'll still get type errors telling me they are expecting MaterialUi.Menu.typeAnchorOrigin
. Looking through the source hasn't quite helped as much as it has in the past. Am I missing something here?
Thanks for all your hard work on this project!
When installing v0.3.3 via yarn with material-ui/core pinned to v1.4.1 I get the following warning:
warning " > @jsiebern/[email protected]" has incorrect peer dependency "@material-ui/core@~1.3.1".
Hi! Could you provide an example how to use Button's component property?. I have Link component:
let component = ReasonReact.statelessComponent("Link");
let make = (~href: string, children) => {
...component,
render: _self => {
<a href=href onClick=(e => {
ReactEventRe.Mouse.preventDefault(e);
ReasonReact.Router.push(href);
})> {children} </a>
}
};
and
<Button color=`Primary size=`Small component=`Callback(Link.make) href={"/users/edit/" ++ string_of_int(u.id)}>
<span className=classes##buttonIcon>
<MaterialUIIcons.Edit/>
</span>
{str("EDIT")}
</Button>
doesn't work. It prints Link000
everywhere.
This is better:
<Button color=`Primary size=`Small component=`Callback(props => <Link href="test"/>)
but still is not what I expect.
Thx in advance for any help
Hey, thanks for this, I'm only starting with Reason/BS and it's good to find these nice packages one can use to hit the ground running. However, I'm getting an error which I assume has to do with this package not supporting JSX3. Do you have any plans to upgrade to that?
This is the code I have
module App = {
[@react.component]
let make = () =>
MaterialUi.(
<Layouts.Center>
<MaterialUi.Button>
{React.string("Sign in with Google")}
</MaterialUi.Button>
</Layouts.Center>
);
};
and the error I'm getting:
server : We've found a bug for you!
server : /home/david/projects/servant/assets/js/Servant.re 19:10-26
server :
server : 17 ┆ MaterialUi.(
server : 18 ┆ <Layouts.Center>
server : 19 ┆ <MaterialUi.Button>
server : 20 ┆ {React.string("Sign in with Google")}
server : 21 ┆ </MaterialUi.Button>
server :
server : This has type:
server : 'a =>
server : ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps,
server : ReasonReact.actionless)
server : But somewhere wanted:
server : React.component('a) (defined as 'a => React.element)
server :
server : The incompatible parts:
server : ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps,
server : ReasonReact.actionless)
server : (defined as
server : ReasonReact.componentSpec(ReasonReact.stateless, ReasonReact.stateless,
server : ReasonReact.noRetainedProps,
server : ReasonReact.noRetainedProps,
server : ReasonReact.actionless))
server : vs
server : React.element
Thanks!
I'm received the following warning in webpack when I try to compile my code
WARNING in ./node_modules/@jsiebern/bs-material-ui/src/MaterialUi_WithStyles.bs.js 75:13-41
"export 'createStyledWithTheme' (imported as 'Styles') was not found in '@material-ui/styles'
@ ./src/core/Styles.bs.js
@ ./src/app.bs.js
@ ./src/index.bs.js
indeed '@material-ui/styles' does not contain 'createStyledWithTheme'.
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/index.js
export { default as createGenerateClassName } from './createGenerateClassName';
export { default as createStyles } from './createStyles';
export { default as install } from './install';
export { default as jssPreset } from './jssPreset';
export { default as makeStyles } from './makeStyles';
export { default as styled } from './styled';
export { default as StylesProvider } from './StylesProvider';
export { default as ThemeProvider } from './ThemeProvider';
export { default as useTheme } from './useTheme';
export { default as withStyles } from './withStyles';
export { default as withTheme } from './withTheme';
I'm using:
"@material-ui/styles": "3.0.0-alpha.3",
"@jsiebern/bs-material-ui": "1.0.0-beta.4",
"@jsiebern/bs-material-ui-ppx": "^1.0.2",
My code compiles and works as expected when I use webpack development mode (it does show the working but it works), but when I compile my code in webpack's production mode all the styles are wrong and the application looks broken.
Running the example files is getting me this result.
Failed to compile.
./node_modules/@jsiebern/bs-material-ui/lib/js/src/MaterialUi.bs.js
Module not found: Can't resolve 'material-ui/Reboot/Reboot' in '/Users/prisc_000/code/BHYV/bhyv-mui/node_modules/@jsiebern/bs-material-ui/lib/js/src'
This the bsconfig.json: https://github.com/idkjs/bs-mui-example/blob/master/bsconfig.json
This is package.json: https://github.com/idkjs/bs-mui-example/blob/master/package.json
When the ppx is added (and then built) on linux, at the end the following error happens:
cp: cannot stat './lib/bs/native/ppx_withStyles.native': No such file or directory
This is because the command is written with a capital S and linux is case-sensitive.
This issue had previously been reported and fixed before the repos are merged (jsiebern/reason-mui-withstyles-ppx#4), and the fix hasn't been brought over.
I'm about to do a pull request.
I'm encountering a strange issue when I attempt to containerize a project that includes bs-material-ui-ppx
.
Outside the containerized environment everything works fine, but when I try to build a Docker container using the node:11
image, I encounter an issue when the postinstall
script attempts to build via bsb-native
. It appears to execute the default bsb
from bs-platform
, per this error message about not supporting the -backend
option:
> [email protected] postinstall /physis/node_modules/@jsiebern/bs-material-ui-ppx/node_modules/bsb-native
> node postinstall.js
Unzip successful.
> @jsiebern/[email protected] postinstall /physis/node_modules/@jsiebern/bs-material-ui-ppx
> bsb -make-world -backend native && cp ./lib/bs/native/ppx_withstyles.native ./ppx
/physis/node_modules/@jsiebern/bs-material-ui-ppx/node_modules/bsb-native/lib/bsb.exe: unknown option '-backend'.
Usage : bsb.exe <bsb-options> -- <ninja_options>
However, the executable path mentioned in the logs (/physis/node_modules/@jsiebern/bs-material-ui-ppx/node_modules/bsb-native/lib/bsb.exe
) implies that the bsb.exe
from bs-material-ui-ppx
's node_modules
is raising this error. But if that were the case, bsb.exe
would know how to handle the -backend
flag. It appears something's lying to us...
This seems related to this issue, though a definitive conclusion wasn't reached in that thread.
Do you have any ideas regarding why this might occur?
Hey - this is awesome, thanks very much for making it!
I'm trying to figure out how to set 'align' on the TableCell
component, as mentioned here:
https://material-ui.com/api/table-cell/ - as it appears under 'props' on those docs, I'd expect to be able to do:
<TableCell align=`Center>...</TableCell>
Should this instead be done using the styling framework? I tried setting a className that set textAlign as I wanted, but it was overridden by a higher precedence style rule - I'm still getting my head round all of the 'vanilla' material-ui concepts so ignore this part if it makes no sense 😄
On the hooks branch the select component behavior has changed.
Previously I would set up the value prop as `String(value) and the onChange event value would be a string. Now the event value returns a polymorphic value [id, "string"].
Switching to native select fixes the problem
I'm trying to add the ExpandMore icon to the expansion panel component. I was referencing the example here (https://github.com/jsiebern/bs-material-ui/blob/master/examples/ExampleIcons.re), but the moduleMaterialUI_Icons
cannot be found. I also tried directly using MaterialUI_Icon
, but I was unable to figure out what to pass as the component.
I have materialUI core added as a dependency. Do I need to also add materialUI icons?
Would really like to use the enter key in text fields, but the bindings offer no onKeyPress prop.
In 0.4.2, reason-react moved from leading underscores (_open
, _type
, ...) to trailing underscores (open_
, type_
, ...), see https://github.com/reasonml/reason-react/blob/master/HISTORY.md.
I think the material-ui bindings should follow suit. Trailing underscores just make more sense, as a leading underscore usually means "unused" in Reason/OCaml.
We tried to use material-ui from CDN, but current binding way makes it impossible to do it. The default
could not be found.
We are using
[@bs.module "@material-ui/core"]
external reactClass : ReasonReact.reactClass = "AppBar";
instead of
[@bs.module "@material-ui/core/AppBar/AppBar"]
external reactClass : ReasonReact.reactClass = "default";
Not sure it is an issue or not. Please close it if it is not.
It'd be great if the built-in SVG icon components were exposed. Currently I've inlined it
with the SVG from https://material.io/tools/icons/
<SvgIcon>
<path fill="none" d="M0 0h24v24H0V0z"/>
<path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/>
</SvgIcon>
It'd be lovely if this could be simply:
<SvgIcon.AccountBox />
Which would pull the built-in component from @material-ui/icons/AccountBox
.
Hi, I created a small app using your bindings and it worked great! You can find it at https://github.com/feihong/cool-char-generator. Although it's a full-fledged program, it's pretty small so I think it works as example code. If you like, you could add a link to it under the Example section of README.md.
The code shows usage of Button, Grid, FormControl, Select, MenuItem, and Popover components. I think the most useful part is how it deals with the anchorEl argument of the Popover component. This was the only thing that I really struggled with when using your bindings, probably because I'm relatively new to Reason.
If you prefer, I can make the edits to README.md myself and send you a PR.
I would like to emulate the following in ReasonML but records can't be accessed dynamically like in JS
const expandedClass = expanded ? 'open' : 'closed'
<div className={classes[expandedClass]}>
Is there a way I can dynamically select one of the Style Class Records? Would they need to be Js.Dict.t instead?
I've resorted to inline styles for the dynamic styling I need.
Thanks
It would be nice to have htmlFor in props for Label based components.
The Material UI examples for Select
<InputLabel htmlFor="age-simple">Age</InputLabel>
<Select
value={this.state.age}
inputProps={{
name: 'age',
id: 'age-simple',
}}
>
I was looking for htmlFor in your bindings but realised that it's not in the Material UI library so you haven't auto generated it. It's an optional in ReasonReact if passed through.
Thanks
current bs-material-ui is missing bindings for @material-ui/core/Popper
I think there are not many changes, and current bidnings work with 3.0.2.
I see that there a variety of to-do items related to theming. Have you decided on an execution plan? If so, perhaps it would be good to document it here?
In the meantime, going to read the code to see what's possible.
Thanks!
Current ppx works with Mac, but it has problem to run on linux. Do you have a version for linux??
Consider the following slightly modified example from the material-ui
documentation.
<MUI.Select
value=(`String(""))
name="age">
<MenuItem value=`String("")>
<em>
( "None" |> ReasonReact.stringToElement)
</em>
</MenuItem>
<MenuItem value={`String("10")}>
( "Ten" |> ReasonReact.stringToElement )
</MenuItem>
<MenuItem value={`String("20")}>
("Twenty" |> ReasonReact.stringToElement )
</MenuItem>
<MenuItem value={`String("30"}>
("Thirty" |> ReasonReact.stringToElement)
</MenuItem>
</MUI.Select>;
This throws the following error:
The function applied to this argument has type
(~className: string=?,
~component: [ `Element(ReasonReact.reactElement) | `String(string) ]=?,
~role: string=?, ~selected: bool=?, ~button: bool=?,
~containerComponent: [ `Element(ReasonReact.reactElement)
| `String(string) ]=?,
~dense: bool=?, ~disabled: bool=?, ~disableGutters: bool=?,
~divider: bool=?, ~classes: MUI.MenuItem.Classes.t=?) =>
ReasonReact.componentSpec
(ReasonReact.stateless, ReasonReact.stateless,
ReasonReact.noRetainedProps, ReasonReact.noRetainedProps,
ReasonReact.actionless)
This argument cannot be applied with label ~value
MenuItem.d.ts
defines the following interface:
export interface MenuItemProps extends StandardProps<ListItemProps, MenuItemClassKey> {
component?: React.ReactType<MenuItemProps>;
role?: string;
selected?: boolean;
}
ListItem.d.ts
defines the following interface
export interface ListItemProps
extends StandardProps<
ButtonBaseProps & React.LiHTMLAttributes<HTMLElement>,
ListItemClassKey,
'component'
> {
button?: boolean;
component?: React.ReactType<ListItemProps>;
ContainerComponent?: React.ReactType<React.HTMLAttributes<HTMLDivElement>>;
ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
dense?: boolean;
disabled?: boolean;
disableGutters?: boolean;
divider?: boolean;
}
ButtonBase.d.ts
defines the following interface
export interface ButtonBaseProps
extends StandardProps<
React.AnchorHTMLAttributes<HTMLElement> & React.ButtonHTMLAttributes<HTMLElement>,
ButtonBaseClassKey
> {
buttonRef?: React.Ref<any>;
centerRipple?: boolean;
component?: React.ReactType<ButtonBaseProps>;
disableRipple?: boolean;
focusRipple?: boolean;
keyboardFocusedClassName?: string;
onKeyboardFocus?: React.FocusEventHandler<any>;
TouchRippleProps?: Partial<TouchRippleProps>;
}
While, React.LiHTMLAttributes<HTMLElement>
is defined as follows:
interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
value?: string | string[] | number;
}
So it seems as though the intersection type ButtonBaseProps & React.LiHTMLAttributes<HTMLElement>
is not being properly parsed.
Is this intended? I'd be happy to take a crack at this issue. Figured I'd reach out first to see if I'm missing something here.
Thanks!
I can't seem to find an easy way to translate this material-ui example https://github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/page-layout-examples/sign-in/SignIn.js,
to reasonML. Can someone please advise? It's especially the breakpoints that is hard.
InputLabel
seems to be broken as of this commit. It doesn't render the actual label anymore. Removing the htmlFor
prop seems to fix it.
Maybe I'm wrong but I didn't find the way to use Typography.Classes variants. As they are not polymorphic or not exposed I don't find how to use it in order to put a class in a Typography element.
Thank you very much for your help =)
Hey, great work on the library so far. I really appreciate the good work!
When I try and use Icons
from MaterialUI the error is that the module is unbound.
It doesn't seem to be exported from MaterialUi.re
. However, it is available at MaterialUi_Icons.
I can make a PR to add it just below the Icon
module:
https://github.com/jsiebern/bs-material-ui/blob/07b14ab57557a226fccc5c016b2adb28594966a5/src/MaterialUi.re#L47
Let me know if that makes sense and sounds good. If I'm doing something silly let me know 😄
./node_modules/@jsiebern/bs-material-ui/src/MaterialUi_Button.bs.js
Module not found: Can't resolve '@material-ui/core/Button/Button' in '/Users/mac/Coding/reasonmat/node_modules/@jsiebern/bs-material-ui/src'
the bsconfig.json:
{
"name": "reason-scripts",
"sources": ["src"],
"bs-dependencies": [
"reason-react",
"@glennsl/bs-jest",
"@jsiebern/bs-material-ui"
],
"reason": {
"react-jsx": 2
},
"bsc-flags": ["-bs-super-errors"],
"refmt": 3,
"package-specs": {
"module": "es6",
"in-source": true
},
"suffix": ".bs.js",
"ppx-flags": ["./node_modules/@jsiebern/bs-material-ui/ppx_withStyles"]
}
Currently, TablePagination
has a binding signature of unit => unit
so there is no way to access the value of page as described in the material-ui-next docs. I'd expect to be able to define the event like:
<MaterialUi.TablePagination
onChangePage=(
(_event, page) => self.send(UpdatePage(page))
)
...
>
instead I get a bucklescript error
This function expects too many arguments, it should have type unit => unit
I've been able to make it work in the meantime by creating my own minimal binding:
module TablePaginationCustom = {
[@bs.module "material-ui/Table/TablePagination"]
external reactClass : ReasonReact.reactClass = "default";
let make =
(
~colSpan: int,
~count: int,
~rowsPerPage: int,
~page: int,
~onChangePage: (ReactEventRe.Mouse.t, int) => unit,
children,
) =>
ReasonReact.wrapJsForReason(
~reactClass,
~props={
"colSpan": colSpan,
"count": count,
"rowsPerPage": rowsPerPage,
"page": page,
"onChangePage": onChangePage,
},
children,
);
};
I'm still super new to Reason, so please let me know if I'm misunderstanding some concepts here.
Thanks!
Auto-layout
The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.
How is this done with bs-material-ui?
I normally find packages and their docs via NPM in the first instance. If I do that for bs-material-ui now, I only see:
Unable to find a readme for @jsiebern/[email protected]
I think this is also having the effect that it doesn't appear in the top few results of Google any more (which is how I found it originally).
Hi! I used safe styles but when I needed linux CI pipeline back then when no ppx for linux was available I switched to unsafe styles. And it worked until last update to 1.0 :) It looks like my styles are not applied. Example on github for unsafe style is quite old like it was not tested with recent changes. All my components use following pattern:
render: self => <MaterialUi.WithStyles
classes=[{
name: "mystyle",
styles: Style.make(
~minHeight="850px",
~position="relative",
()
)
}]
render={classes => <div className=classes##mystyle/>}
/>
I would be very glad if it stared to work again - my codebase is too big now for going back to safe styles.
I was trying out the hooks branch and used [%mui.withStyles...]
in quite a lot of my components to override styling. I checked the bundle distribution with source-map-explorer
and it showed that the components that used the ppx
(around 10-15 in total) where larger than react-dom
itself.
It appears that the generated javascript from [%mui.withStyles...]
has a function style
that takes all possible css
props (in total 348) and calls the function for each class with missing parameters as undefined
, so it looks like this:
function style(prim, prim$1, prim$2, prim$3, prim$4, prim$5, prim$6, prim$7, ..., prim$347) {
var tmp = { };
if (prim !== undefined) {
tmp.azimuth = Caml_option.valFromOption(prim);
}
if (prim$1 !== undefined) {
tmp.background = Caml_option.valFromOption(prim$1);
}
...
style(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, ...)
The function style
is duplicated in each component that uses the ppx
with [%mui.withStyles...]
. This contributes immensely to the overall bundle size.
Is it the expected behavior? Or have I missed some bit of configuration?
I really enjoy working with bs-material-ui
and can't imagine working on my projects without it, but the issue with the bundle size is really concerning. I am happy to help further investigate and improve it though!
For discussion and possible action:
What would it take to support themes?
Continuing from conversation in #17 there is a little work still to be done to fully support the mui theme.
Todo:
I'm going to start with typing the theme object
I must be doing something terribly stupid but I can't seem to get any of the examples to work. I am rather new to ReasonML.
I tried to make a minimal example
[@react.component]
let make = () => {
<div>
<MaterialUi.List>
</MaterialUi.List>
</div>;
};
When I try to compile it it tell me this:
4 ┆
5 ┆;
6 ┆ <MaterialUi.List>
7 ┆ </MaterialUi.List>
8 ┆
This has type:
'a =>
ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps,
ReasonReact.actionless)
But somewhere wanted:
React.component('a) (defined as 'a => React.element)
The incompatible parts:
ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps,
ReasonReact.actionless)
(defined as
ReasonReact.componentSpec(ReasonReact.stateless, ReasonReact.stateless,
ReasonReact.noRetainedProps,
ReasonReact.noRetainedProps,
ReasonReact.actionless))
vs
React.element
So I am a bit unsure what this says because I suspect there are some type aliases at work here, but it seems to suggest I need to pass in a function instead of a value somewhere. I can't really make it out though.
I installed the @jsiebern/bs-material-ui version 1.1.1, the @material-ui/core version 3.9.2, reason-react 0.7.0 and bs-platform 6.2.1. Is there some clash between those versions or so?
This code worked in previous versions:
render: self => <MaterialUi.WithStyles
classes=[{
name: "fullScreen",
styles: Style.make(~width="100vw", ~height="100vh", ())
}, {
name: "fullView",
styles: Style.make(~width="100%", ~height="100%", ())
}, {
but recently it stopped with following error:
If I add classesWithTheme={theme => []}
then my code runs correctly again. But it shouldn't be necessary IMO.
Building the ppx fails on Linux (Ubuntu 18.04) due to a mismatch between the filename of the ppx that is built (i.c. ppx_withstyles.native
) and the filename that is used during the subsequent cp step (i.c. ppx_withStyles.native
)
This is the output I get:
yarn install v1.12.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
$ bsb -make-world -backend native && cp ./lib/bs/native/ppx_withStyles.native ./ppx
[10/10] Building src/Generate.mlast.d
[6/6] Building ppx_withstyles.native
cp: cannot stat './lib/bs/native/ppx_withStyles.native': No such file or directory
error Command failed with exit code 1.
Quick fix is to change the filename in the cp instruction, but I am unsure if this is something platform/version dependant or not.
Hey, still early days for my use of these bindings and I'm deciding whether it is worth it to use the ppx (I don't have a strong reason not to use it but also don't have a strong reason to use it). The API looks almost the same to me so I'm wondering what makes it unsafe?
Using properties like indicatorColor
or textColor
, the selected Tab doesn't get highlighted.
I tried to use the Tab component by cloning this repo and editing one of the files in the examples folder https://github.com/jsiebern/bs-material-ui/tree/master/public/bs-material-ui/examples
And noticed this below output
Below are the versions I have used to try the Tab Component
material-ui - 3.9.2
jsiebern/bs-material-ui - 1.1.1
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.