I am trying to apply the following styles to the ul that appears once the button is clicked:
&.MuiList-root {
padding-top: 0px;
padding-bottom: 0px;
}
Here is a live sandbox where problem is illustrated:
https://codesandbox.io/s/react-typescript-forked-tyd8n8?file=/src/App.tsx
According to the posted sandbox, the styles are attached to CustomMenuItem which is the list items. To target the list and remove the padding, consider to style the Menu instead, with the sx prop (or create a custom component with styled):
Forked live with modification: codesandbox
<Menu
{...bindMenu(popupState)}
sx={{
"& .MuiList-root": {
py: "0px",
},
}}
>
<CustomMenuItem
onClick={() => {
console.log("hello");
popupState.close();
}}
>
label
</CustomMenuItem>
</Menu>
Related
I would like to realize a dropdown, where the width of the dropdown button is not necessarily equal to the width of the dropdown list.
I know that we can use style={{ minWidth: '200px' }} to control the width of the dropdown button and dropdown list. Now, I would like to make the width of the dropdown list 500px.
I tried to set .fui-Listbox { width: 500px } in the stylesheet, but it did not work.
Does anyone know how to do that?
StackBlitz: https://stackblitz.com/edit/react-ts-cejuzs?file=App.tsx,style.css,index.html
import {
FluentProvider,
webLightTheme,
makeStyles,
shorthands,
} from '#fluentui/react-components';
import {
Dropdown,
Option,
DropdownProps,
} from '#fluentui/react-components/unstable';
import { TextField } from '#fluentui/react';
import * as React from 'react';
import './style.css';
export default class Grouped extends React.Component<{}, {}> {
land = ['Cat', 'Dog', 'Ferret', 'Hamster'];
render() {
return (
<FluentProvider
className="fluent-provider"
style={{ display: 'flex' }}
theme={webLightTheme}
>
<Dropdown
className="drop-down"
style={{ minWidth: '200px' }}
placeholder="Select an animal"
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
</FluentProvider>
);
}
}
Edit 1: Following pier farrugia's answer, I tried to use .fui-Listbox { width: 500px !important; }. It did make the width of the dropdown list 500px, however it impacted all the dropdowns in the project, which is not what I want. I tried to add classes and wrote selectors such as .drop-down .fui-Listbox { width: '500px' !important; } and .drop-down-2 .fui-Listbox { width: '100%' !important; }, but it did not work. I guess it's because under the mode of dropdown, .fui-Listbox is not a child class of drop-down-2 or .fluent-provider-2. Does anyone know how to properly write the selectors to limit the impact only to the dropdown I target?
https://stackblitz.com/edit/react-ts-51hiro?file=App.tsx,style.css,index.html
in the code you have :
<Dropdown
className="drop-down"
style={{ width: '100px' }}
placeholder="Select an animal"
>
Your style 100px is generated dynamically.
Change in style even with !important is not working.
Modify the the line
style={{ width: '100px' }}
to
style={{ width: '500px' }}
To change only the width of the dropdown list, you have to use the style or the className tag for that specific dropdown slot (listbox):
<Dropdown
className="drop-down"
style={{ minWidth: '200px' }}
placeholder="Select an animal"
listbox={{style: {width: "500px"}}}
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
or if you want to keep using your stylesheet
<Dropdown
className="drop-down"
style={{ minWidth: '200px' }}
placeholder="Select an animal"
listbox={{className: "custom-dropdown-width"}}
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
and in your stylesheet
.custom-dropdown-width {
width: '500px' !important;
}
How to hide the next and prev button in the TablePagination component. Is it something that I have to do in css or configure the component in some way? At the same time I want to keep the exact position of the "Showing ... ".
There is no option to hide the next and back IconButton in TablePagination. So I'm afraid you have to rely on css.
If you want to remove the buttons completely, use display: none:
<TablePagination
{...props}
nextIconButtonProps={{ style: { display: "none" } }}
backIconButtonProps={{ style: { display: "none" } }}
/>
If you want to hide the buttons and reserve the space where the buttons occupy, use visbility: hidden:
<TablePagination
{...props}
nextIconButtonProps={{ style: { visibility: "hidden" } }}
backIconButtonProps={{ style: { visibility: "hidden" } }}
/>
Live Demo
I'm using Material-UI and building a timeline. My code is as follows:
<Timeline align="right" className={classes.monthlyContainer}>
<TimelineItem >
<TimelineSeparator className={classes.timelineSeparator}>
<TimelineDot className={classes.timelineDot} />
<TimelineConnector className={classes.timelineConnector} />
</TimelineSeparator>
{(data.map(url =>
<TimelineContent className={classes.memsImageContainer}>
<img
className={classes.memsImage}
src={url}
alt="MEMs"
/>
</TimelineContent>
))}
</TimelineItem>
</Timeline>
When I render the webpage, the Material-UI timeline keeps creating a .MuiTimelineItem-missingOppositeContent:before element which is shifting the layout of my timeline to the left.
When I inspect the element, this is what I see:
<li class="MuiTimelineItem-root MuiTimelineItem-alignRightMuiTimelineItem-missingOppositeContent">
<div class="MuiTimelineSeparator-root makeStyles-timelineSeparator-4">
<span class="MuiTimelineDot-root makeStyles-timelineDot-5 MuiTimelineDot-defaultGrey">
</span>
<span class="MuiTimelineConnector-root makeStyles-timelineConnector-6">
</span>
</div>
</li>
When I inspect the styles, this is what I have:
.MuiTimelineItem-missingOppositeContent:before {
flex: 1;
content: "";
padding: 6px 16px;
padding-left: 0px;
padding-right: 0px;
I have recreated it in codesandbox here
How can I remove this element?
The definition of the default styles for the missingOppositeContent element is as follows:
/* Styles applied to the root element if no there isn't TimelineOppositeContent provided. */
missingOppositeContent: {
'&:before': {
content: '""',
flex: 1,
padding: '6px 16px',
},
},
You can override the default styles using the same structure. Overriding this in the theme would look like the following:
const Theme = createMuiTheme({
overrides: {
MuiTimelineItem: {
missingOppositeContent: {
"&:before": {
display: "none"
}
}
}
}
});
You can also do this on a case-by-case basis (in case you have other situations in your code where you want the missing-opposite-content styling) using withStyles:
const TimelineItem = withStyles({
missingOppositeContent: {
"&:before": {
display: "none"
}
}
})(MuiTimelineItem);
You won't believe that you just need to add the <TimelineOppositeContent> component and set display property as 'none'. And it will be solved.
Suppose I want to change the standard white background color of the Select component to green.
My try...
<Select
style={{ backgroundColor: 'green' }}>
// Options...
</Select>
...didn't do it.
Can someone point me in the right direction?
[EDIT]
I ended up using the suggested approach from Jesper We.
Overwriting the color for all selections...
.ant-select-selection {
background-color: transparent;
}
...then I could style the Select components individually.
<Select> renders a whole set of <div>s, you need to take a look at the resulting HTML element tree to understand what you are doing. You can't do it through the style attribute, you need to do it in CSS.
The proper place to attach a background color is
.ant-select-selection {
background-color: green;
}
This will make all your selects green. Give them individual classNames if you want different colors for different selects.
For my form with Select element a have some code in render:
const stateTasksOptions =
this.tasksStore.filters.init.state.map(item =>
<Select.Option key={item.id} value={item.id} title={<span className={`${item.id}Label`}>{item.title}</span>}>
<span className={`${item.id}Label`}>{item.title}</span> - <span class="normal-text">{item.help}</span>
</Select.Option>
)
return (
....
<Select
mode="multiple"
value={this.tasksStore.filters.selected.state.map(d => d)}
onChange={this.handleTasksStatus}
optionLabelProp="title"
>
{stateTasksOptions}
</Select>
....
)
And some css for colorizing.
Result:
Try dropdownStyle instead of style.
<Select
dropdownStyle={{ backgroundColor: 'green' }}>
// Options...
</Select>
dropdownStyle is one of select props.
reference: antd select
From their official docs https://pro.ant.design/docs/style
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.
Antd Select In multi-select state, the default will show all the select items, here we add a limit height for display scroll bar when the content beyond this height.
// TestPage.ts
import { Select } from 'antd';
import styles from './TestPage.less';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
ReactDOM.render(
<Select
mode="multiple"
style={{ width: 300 }}
placeholder="Please select"
className={styles.customSelect}
>
{children}
</Select>,
mountNode,
);
/* TestPage.less */
.customSelect {
:global {
.ant-select-selection {
max-height: 51px;
overflow: auto;
}
}
}
Two points need to be noted:
The imported antd component class name is not translated by CSS Modules, so the overridden class name .ant-select-selection must be put in :global.
Because of the previous note, the override is global. To avoid affecting other Select components, the setting needs to be wrapped by an extra classname to add range restriction
with all the above answers you cant change the styles of tags conditionally but with below approach you can.
You can do a hack and change the styles as you like of tags of select dropdown.
You can use dropdownRender of select which takes 2 arguments
menuNode
props
use props children property to reach to each tag and change the styles and you can conditionally change the styles as you like.
for reference below is the example link for code sandbox
Select Tags Styles Sanbox
May not be an efficient way to do it but you can use this for now to meet your business requirement.
Thanks
Somebody stated the selector to be
.ant-select-selection {...
However it should be selector as follows:
.ant-select-selector {
background-color: green;
}
They implemented this feature with v4 of ant design:
https://github.com/ant-design/ant-design/pull/21064
But beware before blindly upgrading from v3 -> v4 - a lot has changed:
https://github.com/ant-design/ant-design/issues/20661
menuItemSelectedIcon={(props) => {
return (mode == "multiple" ?
<Tooltip title="Check to confirm the apps alongwith the vendor">
<input type="checkbox" checked={props.isSelected}
style={{
margin: 5
}}
/>
</Tooltip>
: null)
}}
Lastly I was working on ant dropdown and it did not get style as I wanted and I did not find a good solution for that.
Then I decided to share my css solution for those who are in my situation:
.license-plate-letters {
overflow-y: hidden !important;
min-width: 240px !important;
.rc-virtual-list-holder>div {
height: auto !important;
}
.rc-virtual-list-holder-inner {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
flex-direction: row !important;
flex-wrap: wrap !important;
.ant-select-item-option {
padding: 0.5rem 12px !important;
&:hover {
background-color: #452380d2 !important;
color: white !important;
}
}
}
}
<Select
virtual={false}
popupClassName="license-plate-letters">
<Select.Option key={sth} Title="title">title</Select.Option>
</Select>
In angular, you can override the style with ng-deep
::ng-deep .ant-select-selector {
background-color: red;
}
I'm trying to apply some reasonably simple styles to my <Dialog> component. In this case, I am trying to round the corners with a border radius. Here are some simple inline styles that I'd like to use to override the default <Dialog> styles:
let overrideStyles = {
padding: 0,
margin: 0,
borderRadiusTopLeft: '4px',
borderRadiusTopRight: '4px',
};
<Dialog> provides a wide variety of possibilities for overriding internal styles. These include bodyStyle, contentStyle, style, titleStyle, overlayStyle, and actionsContainerStyle. I decided to try to apply these styles to each one.
<Dialog
bodyStyle={overrideStyles}
contentStyle={overrideStyles}
style={overrideStyles}
titleStyle={overrideStyles}
overlayStyle={overrideStyles}
actionsContainerStyle={overrideStyles}
modal={overrideStyles}
>
<TestPanel/>
</Dialog>
When I render my TestPanel, it ends up looking like this:
Notice the corners, where my border radius has not been applied... I opened up the inspector and noticed the following div:
If I apply the border radius styling to the highlighted div, the dialog will have its corners rounded as expected. Which leads me to my question...
How do I override the styles of Material UI's <Dialog> component to apply rounded corners as my CSS is attempting?
I solved it with paperProps property.
<Dialog PaperProps={{
style: { borderRadius: 2 } }}
> .... </Dialog>
This perfeclty worked for me
You can override styles like below.
const styles = {
root: { }
paper: { borderRadius: 15 }
}
// ...
<Dialog classes={{
root: classes.root,
paper: classes.paper
}}>
</Dialog>
Unfortunately, Material UI isn't supremely style-friendly. In this case, there's no prop you can override to change the border-radius, so we've got to apply our own class:
let headerStyles = {
color: 'white',
textAlign: 'center',
fontSize: 24,
backgroundColor: '#3B8DBC',
padding: 20,
borderTopLeftRadius: 4,
borderTopRightRadius: 4
};
let bodyStyles = {
backgroundColor: 'white',
padding: 10,
height: 200
};
<Dialog className='test'>
<div style={headerStyles}>Testing</div>
<div style={bodyStyles}>5:43pm</div>
</Dialog>
Then style that class, and, yes, the border-radius has to be set on both of the below CSS classes as well as the TestPanel header:
/* Some rules use !important because Material UI sets them by default */
.test > div > div {
background-color: #3B8DBC; /* Same background-color as TestPanel */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.test > div > div > div {
/* Not overriding the color and border radius here too result in your changes
not being visible. */
background-color: inherit !important;
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.test > div > div > div > div {
/* This div is the topmost padding between the modal content and the edge
of the modal */
padding: 0 !important;
}
This ends up looking like what you want:
screenshot here
Hope this helps!
You can override <Dialog /> styles globally in your application when creating your theme object. The paper key of MuiDialog will let you target the border-radius.
const theme = createMuiTheme({
overrides: {
MuiDialog: {
paper: {
borderTopLeftRadius: '4px',
borderTopRightRadius: '4px'
}
}
}
})
Dialog - CSS api
Material UI Theming
The first answer is not working for me. I tried this and it work perfect for me:
sx={{
"& .MuiDialog-container": {
"& .MuiPaper-root": {
width: "100%",
maxWidth: "740px",
borderRadius: "8px"
}
},
}}