Javascript – Some css properties aren’t showing up when i use js/ts to make the stylesheet

Problem:

I like to create all of my css for my react apps using js/ts instead of css but I’ve discovered that some of the properties don’t register with the browser when I do this. These exact same properties in a .css file work perfectly fine.

Here’s what I mean:

styles.ts

'contactSection': {
     'position':'relative',
     'display': 'flex',
     'flexDirection': 'row',
     'alignItems': 'flexEnd',
     'gap':'2em',
     'padding' : '2em',
     'width': '100%',
     'height': '50%',
     'alignSelf': 'flexEnd',
     'justifyContent': 'flexEnd'
  }

All of the above work fine except justifyContent and alignItems.

But when I put justifyContent and alignItems in a .css file like so:

#contactSection{
    align-items : flex-end;
    align-content: flex-end;
}

they work just fine and everything looks great.

why is this? are there specific other properties that could be overriding these properties.
I don’t think this is the issue because they don’t even show up on the dev tools.

I don’t know if i’m overlooking something or what any advice would be great

thanks

Some of the properties don’t register with the browser when U use js/ts

Solution:

In your styles.ts file, change alignItems, alignSelf and justifyContent properties to:

'alignItems': 'flex-end',
'alignSelf': 'flex-end',
'justifyContent': 'flex-end',

Also make sure that no other CSS styles are being applied to the element, which might override the styles you’re setting in your JavaScript/TypeScript.