Why force text-align="left" on tables?

[mupchrch]

Why do thead, td, and th have text-align="left" applied to them here?

This kind of breaks the align property used in tables. More specifically, it is preventing the following markdown feature when using gatsby-transform-remark:

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

If that's just the way it is, that's cool, but is there a way to prevent/override it? I'm having trouble figuring out how to "unset" it. I've tried:

'td,th': {
  textAlign: 'initial'
}

'td,th': {
  textAlign: 'unset'
}

'td,th': {
  textAlign: null
}

'td,th': null

[nikhilxb]

Yes, this seems like a mistake. Until it's fixed, this hack worked for me:

// In Typography constructor:
overrideStyles: () => ({
    'td,th': {
        textAlign: null,
    },
    // ...
}),

It creates an invalid property value 'null' so the browser ignores it.

[don-esteban]

The hack worked for me too. A possible solution would be a new feature something like this

removeStyles: () => ({
    'td,th': [textAlign, other rules],
    // ...
}),