Is it possible that the Material UI api docs are out of date? Or is there another place to check for element preferences?
i.e. MenuList https://material-ui.com/api/menu-list/ has a property disablePadding to disable the top and bottom padding of the element, but there is no apparent documentation on that.
import { MenuList } from "#material-ui/core";
...
<MenuList disablePadding> ... </MenuList>
disablePadding is from the List component.
In the Inheritance portion:
The properties of the List component are also available.
Related
Is there a way to create a Box or a Paper with a title on top like this screenshot :
I'm talking about the top lefty title portion. I tried using a Box or a Paper component but it doesn't seem like the option is there.
Thank you for the help
You can change a Box's underlying element to a fieldset and add a legend element as a child of the MUI Box, but you'll probably want to apply a little styling to it as MUI does not offer styled versions of fieldset/legend.
import React from "react";
import Box from "#mui/material/Box";
const FieldsetExample = () => {
return (
<Box component="fieldset">
<legend>Jean-François H</legend>
Box content goes here.
</Box>
);
}
Renders:
Working CodeSandbox:
https://codesandbox.io/s/nostalgic-booth-09dwu7?file=/demo.js
Documentation References:
MUI Docs - Box API props (see component)
MDN Docs - <fieldset>: The Field Set element
I'm using the OverlayTrigger component to get hover behavior for tooltips, and therefore not using the Overlay component directly. The Overlay component has a container property that I'd like to use to remedy the tooltip getting cut off by its natural container element.
I've attempted to pass a popperConfig object, but that's not working. I've also tried adding a container attribute to the OverlayTrigger component.
<Container fluid className='flex-fill' ref={rowContainer}>
...
<OverlayTrigger delay={{show: 500}} overlay={renderUserTooltip}
popperConfig={{container: rowContainer}}>
<FaUser/>
</OverlayTrigger>
How can I set the container for the Overlay when the Overlay component isn't directly used?
React bootstrap doesn't have a container prop or something similar (I mean it has a target prop but as this part of the docs suggests, for the OverlayTrigger the type is null, so it doesn't accept values and I don't think you can trick it to accept (and I don't think it would be wise to try).
But a pretty nice example, that shows some sort of a workaround in my opinion, can also be find in the docs, under customizing-trigger-behavior.
Starting from that example, if you need your trigger to be totally separated from the container an option is to just wrap everything in a big container that receives ({ ref, ...triggerHandler }) and all is left is to give your container the ref, and the trigger to your FaUser component. So something like:
<OverlayTrigger
placement="bottom"
overlay={<Tooltip id="button-tooltip-2">Check out this avatar</Tooltip>}
>
{({ containerRef, ...triggerHandler }) => (
<Container fluid className='flex-fill' ref={containerRef}>
...
<FaUser/>
</Container>
)}
</OverlayTrigger>
I also created a sandbox with a minimal reproducible example.
I am using an ant design modal on my site which is internationalized. The modal works fine for all languages except Arabic. When it is on Arabic, when you click the 'next' button, it should show you the next page of the modal, but it just shows a blank modal. I suspect because Arabic is a RTL language, this issue would be solved if I could get the modal to slide in the other direction when the user hits next. I see on Ant Design's documentation they have some mention of RTL functionality on the modal page, but I'm not sure how to implement it. It says
Modal.method() RTL mode only supports hooks.
but i'm not sure what it means by that.
On this configuration page it mentions a direction prop, but I passed it a string "rtl" and that didn't seem to have an effect. It says the prop type should be rtl or ltr, so it shouldn't take a string?
Use configProvider and wrap all antd components in it with direction="rtl". you can also apply it conditionally: direction={condition ? "rtl" : "ltr"}.
import { ConfigProvider } from 'antd';
// ...
export default () => (
<ConfigProvider direction="rtl">
<App />
</ConfigProvider>
);
Reference: https://ant.design/components/config-provider/?theme=dark#header
The material-UI react stepper control steps do not receive the tab focus. Is there a way to enable tabFocus on the steps?
https://material-ui.com/components/steppers/
Already I see tabFocus is exist on the steps but the styles are not show. I think if you add focusRipple props attribute
<StepButton focusRipple onClick={handleStep(index)} completed={isStepComplete(index)} {...buttonProps}>
{label}
</StepButton>
true on the StepButton component you might be able to see the tab focus
https://codesandbox.io/s/material-demo-4m4si
was trying to refactor my menu, which uses List from Material UI.
The unrefactored menu looks like this
<SelectableList id="menu" value={location}>
<ListItem primaryText="Encoding" primaryTogglesNestedList={true} value="/encoding" nestedItems={[
<ListItem primaryText="Base32" containerElement={<Link to="/base32"/>} value="/base32"/>,
<ListItem primaryText="Base32Hex" containerElement={<Link to="/base32Hex"/>} value="/base32Hex"/>,
<ListItem primaryText="Base64" containerElement={<Link to="/base64"/>} value="/base64"/>,
and there is clearly a lot of boilerplate, so I decided to create a custom component, which would handle the duplicities in the code
import React from 'react';
import {ListItem} from 'material-ui/List'
import {Link} from 'react-router'
const MenuItem = ({anchor, ...other}) => (
<ListItem containerElement={<Link to={anchor} />} value={anchor} {...other} key={"item-"+ anchor}/>
);
export default MenuItem;
The problem is, that when I used it
<MenuItem primaryText="Base32" anchor="/base32" />
The menuItem ceased to be selectable. Further more, to recall the value from SelectableList id="menu" value={location} (to expand the menu, when page is reloaded), I had to to add value tag to MenuItem as well (duplicity back).
How should I handle this refactoring?
Update
JSFiddle (simplified example): https://jsfiddle.net/1vk8wzoc/27/
Ok, so looking at your JSFiddle and the Material UI source, it seems like they reject children without certain properties:
https://github.com/callemall/material-ui/blob/master/src/List/makeSelectable.js#L18
extendChild(child, styles, selectedItemStyle) {
if (child && child.type && child.type.muiName === 'ListItem') {
....
So your component is never receive the styles to indicate that its selected.
I would do one of two things here:
Possibly raise a PR with the library to support HOC's for
Listitems
Or, use React.cloneElement which should copy all
the required stuff across so it appears to be the right element to
the makeSelectable function