Why force text-align="left" on tables?
mupchrch opened this issue · 2 comments
mupchrch commented
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 commented
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 commented
The hack worked for me too. A possible solution would be a new feature something like this
removeStyles: () => ({
'td,th': [textAlign, other rules],
// ...
}),