For this fullstack app I moved into the original devs seem to have implemented some component to create the tables for the app's webpage
Problem is the padding on all the cells is quite large. Opening the rendered page in chrome and using chrome developer tools I can see
.MuiTableCell-sizeSmall{
padding: 6px 24px 6px 16px;
}
It seems like MuiTableCell isn't directly implemented in the code (hence I'll only see it in the rendered DOM and not in the code) . Seems like it mostly implements material-ui and material-table.
I have a little front end experience but I'm not familiar with what to do next to modify the padding.
Specifically, from playing around with the chrome developer tools, I want to set the right padding (set at 24px) down to 0px so that the rendered DOM uses this
.MuiTableCell-sizeSmall{
padding: 6px 0px 6px 16px;
}
Any advice?
Some imports from #Material-UI i think might be relevant are:
ToolBar, Appbar, FormControl, InputField, TextField, ViewColumn, and TablePagination
And imported from material-table are' MaterialTable, and MTableToolbar
In intellij I did a blind search and found that the SizeSmall property seems to come from TableCell (part of material-ui)
That CSS is the work of small value for size prop.
One of the ways to override it is to use makeStyles and override .MuiTableCell-sizeSmall
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles({
customTable: {
"& .MuiTableCell-sizeSmall": {
padding: "6px 0px 6px 16px" // <-- arbitrary value
}
},
});
function YourComponent() {
const classes = useStyles();
return (
...
<Table classes={{root: classes.customTable}} size="small">
...
The top answer is deprecated, see: https://mui.com/system/styled/
Here is how you modify a table cell in MUI, here I remove the default padding for example.
const StyledTableCell = styled(TableCell)({
padding: 0,
})
You can then use the custom, or the original Cell component in your table.
<TableContainer>
<Table>
<TableBody>
<TableRow>
<TableCell>Normal cell.</TableCell>
<StyledTableCell>Custom style here.</StyledTableCell>
<TableCell align="right">Great.</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
Related
I am using reactstrap's Modal and I just want to expand its size to 95% of the visible area.
Currently, when applying the prop size="xl" to Modal, it is too small still for my needs. So, I found a potential solution on this page that showed applying a custom class coming from an external stylesheet into reactstrap Modal worked for him.
After following this advice, I succeeded in making the modal expand to 95% of visible area. Unfortunately, refreshing the page caused the modal to snap back to size xl. And so, I need a solution which reliably makes the reactstrap Modal apply the external stylesheet's styles and never 'snaps back' to xl.
What I tried, and results...
Adding the stylesheet to index.html as a <link /> in the /public folder.
I added this: <link rel="stylesheet" href="%PUBLIC_URL%/styles.css">
Result: fail.
I tried using styled-components. This failed for me because I had no success after trying to wrap divs around the modal which contained my styles. Perhaps there's a clever way of using reactstrap Modal and styled-components to create a HOC that can do this task?
Result: fail.
Used React state and event handler and a button which, when clicked, applied and removed the custom class name I used custom-modal-style. The way used it was like so...
import React, { useState, useEffect } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import './styles.css'
const toggle = () => setModal(!modal);
const ProductWizard = () =>
{
const [makeLarger, setMakeLarger] = useState(false);
const [modal, setModal] = useState(false);
return(
<>
<Button color="info" onClick={toggle}>Create Product</Button>
<Modal
size="xl"
centered
scrollable
isOpen={modal} toggle={toggle}
contentClassName={ makeLarger ? "custom-modal-style" : null }
// contentClassName="custom-modal-style"
>...</Modal>
</>
)
}
Here are the styles.css stylesheet contents...
.custom-modal-style {
position: fixed;
left: 5px;
width: 98%;
right: 5px;
max-height: 100%;
overflow: auto;
overflow-y: scroll;
display: block;
}
Result: fails to expand to 95% of the screen size, although it did slightly enlarge (by margin of around 20px to 30px).
Does anyone have a solution which causes the reactstrap Modal component to reliably expand to the dimensions of 95% of the screen size?
I want something like this Here is the example!
I try with the material UI box, but it's not rendering the box only rendering the text.
Here is the code:
import * as React from 'react';
import Box from '#mui/material/Box';
export default function BreakpointsAsArray() {
return (
<div>
<Box sx={{ width: [100, 200, 300] }}>This box has a responsive width.</Box>
</div>
);
}
Material UI's Box name is quite deceptive and it doesn't mean a rectangle box will automatically be created in the rendered HTML. Here is some good explanation of the box component. You still need to add css/styling to make it according to your choice. The rectangle box you see in your shared image, is actually added (through some website code) to the better distinguish between the documentation text and the code snippet output. Anyhow, I forked the codesandbox example and added some custom styling to show, how the styling can be updated. You can use the sx prop to add any styles you needed. here is a little example.
sx={{
width: "90%",
padding: "24px 20px", // theme padding
border: "1px solid rgba(0, 0, 0, 0.12)",
borderRadius: 4
}}
I'm working on a project written in React (using TypeScript) with the Material-UI library.
I'd like to use an animated submit button, replacing the default button of the library. To do so, I adapted this button, which I found here, to work inside React: I put the CSS file inside a "styles" folder and then I imported it in the .tsx file of my Button. I adapted the HTML code to JSX so my render method looks like that:
return(
<button className={`submit-button ${btnState}`} onClick={handleClickOpen}>
<span className="pre-state-msg">Submit</span>
<span className="current-state-msg hide">Sending...</span>
<span className="done-state-msg hide">Done!</span>
</button>
);
The button works just fine, problem is importing the CSS breaks other things in other parts of the application (from what I saw, it breaks the Container component whenever the container doesn't render a component which includes the custom button).
Now, I guess it has something to do with how Material-UI works, but I don't really know how to solve this problem.
I know Material-UI suggests to use CSS-in-JS through useStyles hook, withStyles or similar things. The fact is I don't know how to port that CSS file in order to use it like that, I don't even know if this solution supports every CSS feature, such as element>element selector, classList.add, etc.
So, in order to solve this problem, is there a way to use the CSS file without breaking anything? This doc suggests its possible but I had no luck trying. If it's not possible to use pure CSS, is it possible to convert that code to CSS-in-JS, in a way I can either programmatically modify the className of an element or use the classList.add method?
Thanks in advance to anyone who'll spend some time to read this question and try to answer.
It is definitely possible to turn that CSS into JSS which MUI uses under the hood. It's not that hard if you toy around in the JSS playground and see the generated CSS. For instance:
keyframes short_press {
to: { transform: rotate(360deg); }
}
.submit-button {
display: block;
}
.submit-button:hover, .submit-button:focus {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.submit-button > span {
display: block;
}
.submit-button.animated {
}
Will be:
import { makeStyles } from '#material-ui/styles';
let useStyle = makeStyles({
'#keyframes short_press': {
to: { transform: 'rotate(360deg)' },
},
button: {
display: 'block',
'&:hover, &:focus': {
boxShadow: '0 5px 15px rgba(0, 0, 0, 0.1)',
},
'& > span': {
display: 'block',
},
'&.animated': {
animation: '$short_press 1s infinite linear',
}
},});
function YourButton() {
let css = useStyle();
return (
<button className={`${css.button} ${animated ? 'animated' : ''}`}>
Click
</button>
);
}
i have to update the material ui version in my project. The version i used was the 0.20 and now i've updated to v.4.9
I've changed all the imports from material-ui to #materia-ui/core and my app is compiling successfully. The issue i have is with the styling. I was not using styles in every component but i use a global css file which i import in my main.js and for each element and component i've add the style here. The problem is that the current material-ui components are styled wrong. For example the Chip component that i used i have a classname which is this:
.euro-chip-default {
background-color: #FFF !important;
border: 1px solid #E9EEF1 !important;
}
Now that i've updated the version this classname is now working properly. My chip is looking awefull. Is there anything i must do to use the css in the updated material ui project. From the docs i can't find a solution. They use the withStyles which i can't use since my components wil become huge
Thanks!
I think you just need to update your css properties to match the ones they use here Chip Styles
So in your styles.css file you could use
.MuiChip-root {
background-color: #FFF !important;
border: 1px solid #E9EEF1 !important;
}
And your chip would be styled as you want it
Like in here CodeSandbox
Who knows how to customize Ant.design styles in proper way?
For example, I want to change the default backgroundColor and height of Header section:
import React, { Component } from 'react';
import { Form, Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
export default class Login extends Component {
render () {
return (
<div>
<Layout>
<Header style={{backgroundColor: '#555555', height: '5vh'}}>header</Header>
<Layout>
<Content>main content</Content>
</Layout>
<Footer>footer</Footer>
</Layout>
</div>
)
}
}
Is it ok, or there is a better way to customize styles?
Because I have not found some component's attributes or smth. like this.
Antd has externized most of their styling variable in LESS variables
as you can see in
https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
To be able to overwrite those variables you need to use modifyVar function from LESS
you can find more about theming here
So to your specific question, #layout-header-background does the job
This is how i customized the default antd styles in a particular component
In scss or less
.booking_information_table {
:global {
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
padding: 0 0 !important;
background-color: unset;
border: none;
overflow-wrap: break-word;
}
}
}
In js file
after the import statement
import styles from './component.module.less'
In return
<Table
dataSource={bookingInformationDataSource}
columns={bookingInformationColumns}
pagination={false}
className={styles.booking_information_table}
/>
My personal approach (I'm working with dva-cli though):
Every time I need to override the CSS, I use a CSS file located in the same folder and import it such as:
your-component.js:
import styles from './your-stylesheet.css';
...
< AntdComponent className= {styles.thestyle} />
your-stylesheet.css:
.thestyle {
background-color: '#555555';
}
In the less file(like a CSS) you can handle customize styles. For
example in your case
.ant-layout-header{
height: 100vh;
background-color:#f50;
}
If you use Ant card
.ant-card-head{color:#j14}
I hope you can understand now
The above mentioned approaches work for simple components like Header but don't always work for complex components like Menu, Tabs, Collapse, Select, and others, due to styles nesting priority. At work we use the approach described by jayanes but we go deeper into nested Ant Design classes. Let me explain it in the following example: when you import Tabs from "antd", you have only 2 tags to override styles for: Tabs and TabPane.
<div className={styles.tabsContainer}>
<Tabs className={styles.tabs}>
<TabPane className={styles.tabPane}>
Tab 1 Title
</TabPane>
</Tabs>
</div>
But this antd component has a very complex structure. You can verify in dev tools: it has .ant-tabs-bar, .ant-tabs-nav-container, .ant-tabs-tab-prev, .ant-tabs-tab-next, .ant-tabs-nav-wrap, .ant-tabs-nav-scroll, .ant-tabs-tab-active, .ant-tabs-ink-bar and others.
The way to go is: in your less file nest the .ant-... classes inside your own parent component's className (in order to avoid overriding all the antd classes in the whole app after code compilation). Write there your own css properties, for example:
.tabsContainer {
.ant-tabs-tab-active {
background: #fff266;
color: #31365c;
&:hover {
color: darken(#31365c, 5%);
}
}
.ant-tabs-ink-bar {
background: #fff266;
}
}
If you still need more detailed explanation, please refer to the video I posted on YouTube on how to customize Ant Design components - tabs.
Override the component style
Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.
Override the component style
Customizing Antd theme Colors can be a hassle thus, I created a package that allows you to change them easily with post CSS you can even change them to CSS variables and change them in runtime.
For more info https://www.npmjs.com/package/ant-post-css-theme