How does one reduce the amount of space between two Form.Item's in a Form?
for example in any of the antd form examples the spacing between a Form.Item is all the same and (to my eye) rather large.
You need to style the Form.Item component, for example with inline-style:
// The current form item is margin 15px top.
<Form.Item style={{ marginBottom: "0px" }}>
<Input />
</Form.Item>
Or the entire Form by overriding the css-class, for example with CSS-in-JS:
// Apply style to all form
const StyledForm = styled(Form)`
.ant-form-item {
margin-bottom: 0px;
}
`;
Demo:
Same can be achieved with .css file and importing it
First find the style that is achieving what you want to override, the override it by importing custom css. Your example:
.ant-form-inline .ant-form-item {
margin-right: 8px; // default is 16px
}
Related
At the moment I'm using SCSS, as it is easy to use with NextJS. I really like how this system works, using the SCSS modules, and so I would also like to use it when using Material-UI. Material-UI uses JSS, which is a lot of boilerplate to write every time. Additionally, I prefer not to work with two ways of styling (SCSS modules and JSS). I already changed the order of CSS injection, so that I can use my SCSS modules on Material-UI components. However, I'm wondering if there is a way to overwrite styles of Material-UI components using SCSS modules? I have tried the following and a few similar things, but nothing seemed to work:
import styles from "./Login.module.scss";
import Button from "#material-ui/core/Button";
function Login() {
return (
<section>
<Button className={styles.button} variant="contained" color="primary">
Verify
</Button>
</section>
);
}
export default Login;
.button {
padding: 10px;
margin-bottom: 10px;
.MuiButton-containedPrimary {
border: 2px solid red;
background-color: red;
}
}
Below is the correct syntax:
.button {
padding: 10px;
margin-bottom: 10px;
&:global(.MuiButton-containedPrimary) {
border: 2px solid red;
background-color: red;
}
}
The example above has two key changes:
Using :global(.MuiButton-containedPrimary). Without using :global, CSS modules will transform the MuiButton-containedPrimary into a class name unique to this module and then it won't match what Material-UI puts on the button.
Adding the & in front effectively creates a selector like .button.MuiButton-containedPrimary matching an element with both classes on it. Your original syntax would treat .MuiButton-containedPrimary as a descendant selector and only match elements with that class that are a descendant of the button rather than the button itself.
You can use makeStyles of #material-ui. And pass to classes to override CSS default of material-ui.
import { makeStyles } from "#material-ui/styles";
const useStyle = makeStyles(() => ({
root: {
padding: "10px",
marginBottom: "10px",
},
containedPrimary: {
border: "2px solid red",
backgroundColor: "red"
}
}))
function Login() {
const classes = useStyle();
return (
<section>
<Button classes={classes} variant="contained" color="primary">
Verify
</Button>
</section>
);
}
tried to change the antd carousel dots styles, it can be able to implement with CSS but not with styled-components(CSS is not allowed in my project). as im new to front-end dont know the proper solution for this.
here is the code example https://stackblitz.com/edit/react-opnojd-rfagtz?file=index.js
thanks in advance :)
When using styled-component, the style would be applied with className sc-....
In your case, its style would be applied in div containing .slick-slider.
But, .ant-carousel is className for parent of that.
So, if it was included in the selector, style will be not applied.
Try this.
const CarouselWrapper = styled(Carousel)`
> .slick-dots li button {
width: 6px;
height: 6px;
border-radius: 100%;
}
> .slick-dots li.slick-active button {
width: 7px;
height: 7px;
border-radius: 100%;
background: red;
}
`;
I'm trying to implement or add multiple class in out container when I click a button. But it seems that the styling is not being applied. Below are my code
Layout.module.css
.Content {
padding-left: 240px;
min-height: calc(100vh);
top: 0;
display: block;
position: relative;
padding-top: 80px;
background: #eee;
padding-bottom: 60px;
transition: padding-left 0.2s linear;
}
.Content.collapse {
padding-left: 100px;
display: block;
transition: padding-left 0.2s linear ;
}
Now I added the collapse class in my nav component like so
const layout = (props) => (
<Aux>
<Sidebar collapse={props.collapse} />
<div className={`${classes.Content} ${props.collapse ? 'collapse' : ''}`}>
<TopNavigation toggle={props.toggle}/>
{props.children}
<Footer />
</div>
</Aux>
);
So basically I'm just checking the props if it's collapse or not. If it is then I'll add a text collapse in the class.
Now when I click on a button it sets the state.collapse = true/false. It was able to do it's job. Now it seems that it's not reading my css style. Below is the generated class in my DOM
Notice the class .Content styling was detected. But as you can see here
Layout_Content__2WLOk collapse the div container has a class of collapse. So I was thinking it should read the .Content.collapse selector. Am I missing something here?
When using CSS modules, it creates a unique classname for each class for each instance of the component.
So you need to use the imported classes to have access to the generated classnames, just like you do for the .Content
So
<div className={`${classes.Content} ${props.collapse ? classes.collapse : ''}`}>
You are using a string not the generated hash
this part will not work
${props.collapse ? 'collapse' : ''}
Quick fix
Try not chaining it.
.collapse {
padding-left: 100px;
display: block;
transition: padding-left 0.2s linear ;
}
and add
classes.collapse instead of collapse
${props.collapse ? classes.collapse : ''}
In React you need to use the keyword 'className' instead of 'class'
https://reactjs.org/docs/dom-elements.html#classname
Also if you want to use CSS Modules you need to import your Layout.module.css file like this
import styles from './Layout.module.css';
And you can add CSS selector like this
<div className={styles.Content}></div>
you can study this here https://www.w3schools.com/react/react_css.asp
I am using the Material UI autocomplete field (https://material-ui.com/api/autocomplete/#css) I have been able to modify everything my custom Autocomplete component has on its own root but not renderedInput of the variant style that is a filled TextField. Currently the class is as such:
.MuiAutocomplete-inputRoot[class*="MuiFilledInput-root"] {
padding-top: 19px;
padding-left: 8px;
}
I can affect the background color of inputRoot:{} but cannot remove these paddings at all. I only want this component to look this way since they add padding for the label above it.
Codebox
You need to match the specificity of the default styles in order to override it successfully. The default styles have a class selector plus an attribute selector. You can match this specificity by nesting the same attribute selector within your inputRoot class styles as shown below:
const CustomAutocomplete = withStyles({
inputRoot: {
backgroundColor: "white",
border: "solid",
'&[class*="MuiFilledInput-root"]': {
paddingTop: 0,
paddingLeft: 0
}
}
})(Autocomplete);
I'm using React-bootstrap to make a progress bar. Easy enough, it works:
<ProgressBar className="progress" striped now={this.state.now}
label={this.state.progress + "/" + this.state.total}/>
But the label text is white. I referenced the link above and search through their short docs, but couldn't find the option. Is it possible to change the label's color?
One approach is to assign a variant property, for example in React you can do the following:
<ProgressBar now={score} variant="SOME_NAME" />
Write the CSS class like so:
.bg-SOME_NAME{
background-color: #123445!important;
}
React Bootstrap components allow for custom variants, in your css you can define something like
{`
.progress-custom {
background-color: purple;
color: white;
}
`}
And then you can use it like:
<ProgressBar variant="custom" />
You can read more about custom variants here.
The following worked for me. In addition to changing the color of the bar, I wanted to not have a border radius.
I set the following global styles in my styles file.
`
// this is for the bar container
background: #F8F8F8;
border: 0px solid rgba(255, 255, 255, 1);
border-radius: 0px;
height: 16px;
.progress-bar { // this is for the bar itself
background-color: #4AA69F;
}
`
And I didn't change anything with the code. Yes, it did work.
const now = 25
const ProgressInstance = () => <ProgressBar now={now} />