I’m using chakra ui’s TableContainer with the following style:
<TableContainer p="8" m="8" bg="white" border="6px solid" borderRadius="xl" borderColor="white" boxShadow='base'>
I want to add a default theme to it, I have tried the following:
I have this file tableContainer.js
:
const TableContainer = {
baseStyle: {
p: "8",
m: "8",
bg: "white",
border: "6px solid",
borderRadius: "2xl",
borderColor: "white",
boxShadow: "base",
},
}
export default TableContainer
In my index.js
I have this to set the default usage:
import { extendTheme } from "@chakra-ui/react"
import TableContainer from ".tableContainer"
const overrides = {
components: {
TableContainer
}
}
export default extendTheme(overrides)
My app.js
has the following line it it as well:
<ChakraProvider theme={theme}>
Then just calling <TableContainer><TableContainer/>
But my styling is not applying.
Any advice would be greatly appreciated?