I’ve got a button like this (material-ui):
JavaScript
x
14
14
1
//theme.js
2
export const XButtonTop = withStyles({
3
root: {
4
borderColor: medium_col,
5
borderRadius: 1,
6
borderTopLeftRadius: 16,
7
borderTopRightRadius: 16,
8
height: 28
9
},
10
label: {
11
textTransform: "uppercase",
12
fontSize: "10px"
13
}
14
})(Button);
JavaScript
1
14
14
1
//App.js
2
import {
3
XButtonTop
4
} from "../theme";
5
6
const Selector = state => {
7
return (
8
<div>
9
<XButtonTop fullWidth size="small" disableElevation>
10
)
11
</XButtonTop>
12
</div>
13
)
14
}
I need to rotate the label (90 degrees).
Can someone help me please? Thanks
Advertisement
Answer
JavaScript
1
5
1
label: {
2
textTransform: 'capitalize',
3
transform: 'rotate(-90deg)',
4
}
5
Then you may want to change the height of the button too. Something like this for the root:
JavaScript
1
3
1
height: 120,
2
width: 30
3