Is jsx support three dots operator?

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} />

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

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;


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);



extern class BoxStyles {

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


and …defaultProps don’t compile to js code .

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.

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

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