Is jsx support three dots operator?

1

is jsx support three dots operator?

I did a test.but not work.

var defaultProps = {
bgcolor: 'background.paper',
m: 1,
border: 1,
style: {width: '5rem', height: '5rem'},
};

function BorderColor() {
return jsx('
<Box borderColor="error.main" ${...defaultProps} />
</Box>
');
}
2

Please share the errors when you get one, “not work” doesn’t help us much…

As for your use case, {...someProps} does work but

  • <Box /> hasn’t been added to haxe-material-ui, there are many new (at the time) things it is using that weren’t available and possibly hard to type nicely (I don’t remember exactly); surely you got an error when trying to import it?
  • Also please note that only version <= 4 is supported, so don’t expect things from v5 to work
3

I try to write some code like your other componets

package mui.core;

import css.FlexDirection;

import css.FlexWrap;

import mui.core.grid.GridAlignContent;

import mui.core.grid.GridAlignItems;

import mui.core.grid.GridClassKey;

import mui.core.grid.GridJustifyContent;

import mui.core.grid.GridsNumber;

import mui.core.grid.GridSpacing;

import mui.core.styles.Classes;

import mui.core.box.BoxClassKey;

typedef BoxProps = {

    > StandardDOMAttributes,

    @:optional var alignContent:GridAlignContent;

    @:optional var alignItems:GridAlignItems;

    @:optional var children:ReactFragment;

    @:optional var classes:Record<GridClassKey>;

    @:optional var component:ReactType;

    @:optional var container:Bool;

    @:optional var direction:FlexDirection;

    @:optional var item:Bool;

    @:optional var justify:GridJustifyContent;

    @:optional var justifyContent:GridJustifyContent;

    @:optional var lg:GridsNumber;

    @:optional var md:GridsNumber;

    @:optional var sm:GridsNumber;

    @:optional var spacing:GridSpacing;

    @:optional var wrap:FlexWrap;

    @:optional var xl:GridsNumber;

    @:optional var xs:GridsNumber;

    @:optional var zeroMinWidth:Bool;

    @:optional var display:String;

    @:optional var borderColor:String;

}

@:jsRequire('@material-ui/core', 'Grid')

extern class Box extends ReactComponentOfProps<BoxProps> {

    static inline function styles<TTheme>(theme:TTheme):ClassesDef<BoxClassKey>

        return BoxStyles.styles(theme);

}

@:jsRequire('@material-ui/core/Box/Box.js')

extern class BoxStyles {

    static function styles<TTheme>(theme:TTheme):ClassesDef<BoxClassKey>;

}

and …defaultProps don’t compile to js code .

4

What error(s) are you getting?

It’ll probably break anyway since defaultProps is using bgcolor, m and border which are not valid props according to your BoxProps typedef.

5

oh,yes,
I think it’s better jsx can show error if pros was not define.

6

It usually can, but not when using {...someProps}. Not sure it could be properly supported…