Can not set justifyContent center before "@media"

[tienlx97]

I have default BaseDialog style: justifyContent center. But when I add customStyle from parent it does not effect:

   justifyContent: {
       // default: null,
       '@media (max-width: 679px)': 'center',
     },

• But If I do this, it ok:

// eslint-disable-next-line @stylexjs/valid-styles
     '@media (max-width: 679px)': {
       justifyContent: 'center',
     },

import stylex from '@stylexjs/stylex';

export default async function Home() {
  return <FDSDialogContainer />;
}

const FDSDialogContainer = () => {
  return <BaseDialog rootXStyle={styles.root} />;
};

const BaseDialog = ({ rootXStyle }: { rootXStyle: any }) => {
  return (
    <div
      style={{
        width: '200px',
        height: '100px',
        backgroundColor: 'yellow',
      }}
    >
      <div style={{}} className={stylex(styles.root1, rootXStyle)}>
        Must be center
      </div>
    </div>
  );
};

const styles = stylex.create({
  root: {
    // eslint-disable-next-line @stylexjs/valid-styles
    // '@media (max-width: 679px)': {
    //   justifyContent: 'center',
    // },
    justifyContent: {
      // default: null,
      '@media (max-width: 679px)': 'center',
    },
  },

  root1: {
    alignItems: 'stretch',
    boxSizing: 'border-box',
    display: 'flex',
    height: '100%',
    flexDirection: 'column',
    justifyContent: 'center',
    color: 'black',
    width: '100%',
  },
});

[nmn]

You can only apply one style for justifyContent. It's value for all conditions must be defined together. This is by design. So when you set,

 justifyContent: {
   // default: null,
   '@media (max-width: 679px)': 'center',
 },

For viewports larger than 679px, you aren't setting any justifyContent at all. The values for different breakpoints don't "merge" by design.