Currently, I am working on a React project using Material-UI where I am trying to create a numpad. The code snippet below showcases part of my implementation:
// some parts are omitted for conciseness
const keys = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0];
return (
<div>
{keys.map(key => {
return (
<KeyPadButton key={`button-${key}`}
value={key}
styles={[4, 1, 0].includes(key) ? styles.keypadButtonStyles : {}}
/>
)
})}
</div>
);
const styles = {
keypadButtonStyles: {
clear: 'left',
display: 'table',
},
}
My goal is to arrange the numbers in the numpad as follows:
7, 8, 9
4, 5, 6
1, 2, 3
0
Specifically, I want 4, 1, 0 to be on a new line. Although I've tried using CSS properties such as clear: left and display: table, they move the numbers onto separate lines without any wrapping arrangement. I aim to have each number like 5, 6 next to its preceding digit, maintaining an organized layout. Unfortunately, altering the style to display: block disrupts the default Material-UI styles. Do you have any suggestions to help me achieve the desired layout?