MUI's docs say that it's possible for a Box wrapper to override its child's styling with the clone option, like this:
<Box color="red" clone>
<Button>Click me</Button>
</Box>
As far as I understand, it's supposed to cloneElement its child and inject the styles. However, it doesn't seem to work at all - not with buttons, nor typographies, nor any other component.
Hmm yes clone has some issues seems it will be removed in v5
https://github.com/mui-org/material-ui/issues/18496#issuecomment-557835104
for the moment could use like but not good :(
<Box color="red">
<Button color='inherit'>Click me</Button>
</Box>
Related
I have a common custom component (a <MenuItem /> from Material-UI) that is wrapped in React.forwardRef. I use this in many places for displaying items in <Menu /> components - sometimes a ref is passed, in other cases not.
I want this component to have a <Tooltip /> but I find that the Tooltip does not display on the first instance of the common component in a Menu (but does show on other instances).
If i remove the prop innerRef={ref} from the <MenuItem /> in my component, that does fix it - but I don't quite understand why?
I think I could resolve this by wrapping the <MenuItem /> in e.g a <span />, but I'm keen to understand what is going on here and why the Tooltip is not showing?
https://codesandbox.io/s/new-fire-fngcof?file=/src/App.tsx
There is no property named innerRef in MUI or React.
Change that to ref and everything will work as expected.
<Tooltip title={props.tooltipTitle}>
<MenuItem ref={ref}>Menu item</MenuItem>
</Tooltip>
If you are eager to know what is innerRef, see this question.
I wanna use styled-system in my project which is the admin panel. I built project basing on React Material and I have a lot of different forms with inputs, selects, checkboxes and so on. In many places I have to set some margins/paddings for elements and I make this moment with some custom Box component, that uses styled-system functions (space, color, etc). But it the end I got a rather cumbersome structure something like this :
<Box>
<Box mb={10}>
<Box mr={2}><TextField/></Box>
<Box mr={2}><TextField/></Box>
<Box mr={2}><TextField/></Box>
</Box>
<Box>
<Box mr={2}><Select/></Box>
<Box mr={2}><Select/></Box>
<Box mr={2}><Select/></Box>
</Box>
</Box>
And it's just a little part of the component. I think, in this situation it would be good to create some wrapper around TextField/Select components which will add styled-system functions to components.
And then use them like :
<Box>
<Box mb={10}>
<TextField mr={2}/>
<TextField mr={2}/>
<TextField mr={2}/>
</Box>
<Box>
<Select mr={2}/>
<Select mr={2}/>
<Select mr={2}/>
</Box>
</Box>
But then I understand that react-material has a lot of components and what I have to do? Override all of them to have some similar style? Or what way can be more comfortable?
So what you are asking for can definitely be achieved without adding that much noise to the markup.
First off, the styled markup works for all material-ui components. Luckily, styled-system is ALSO interoperable with styled-components. So you can do this
const StyledButton = styled(TextField)`
color: red;
// to access theme in a styled-system way
${get("mt", 3)};
`;
That accessor called get is a little unique, it comes from this package. It allows you to use all the styled-system flavoured keys inside of a styled-component.
If you wanted inline props for all the material components, like you described, its a little more involved. You would need to wrap each component with the proper decorators that enable such inline props. Creating basically a shadow library.
import styled from 'styled-components';
import { variant, space, layout, position } from 'styled-system';
export default styled(TextField)(
position,
layout,
space,
// whatever else
);
Check out the official build-a-box tutorial for better insight.
I'm using the Modal built into React Native (and specifically I'm using the React Native Paper variant). By default this seems to open in the middle of the screen. However if you're doing some text input in the Modal then it would be more useful if it opened either at the top of the screen, or was aware of the keyboard. However I can't find a way to get this to work.
My (simplified) modal code is:
<Portal>
<Modal visible={visibleModalNew} onDismiss={closeModalNew} contentContainerStyle={styles.modalContainer} >
<View>
<Title>New</Title>
<View>
<TextInput
mode="outlined"
label="Data"
style={{alignSelf:'center', width:'95%'}}
defaultValue={newData}
onChangeText={newData=> setNewData(newData)}
onSubmitEditing={() => handleDone()}
/>
<Button onPress={() => doSomething()}>Do something</Button>
</View>
</View>
</Modal>
</Portal>
Ah, figured out a way round. I wrapped the modal in a KeyboardAwareView, removed the visible prop from the modal, and then wrapped it all in a conditional render and put the visible prop there instead. Seems to work as hoped.
I want to embed a custom react component inside an SVG but it's not working. Is it even allowed in an SVG? if not, are there workarounds?
Below is my code, trying to insert the Modal component:
<polygon
id="Paris"
<Modal show={show} handleClose={hideModal}>
<p>Modal</p>
<p>Data</p>
</Modal>
<button type="button" onClick={showModal}>
open
</button>
stroke="#010101"
fill="rgb(251, 106, 106)"
stroke-width="2"
stroke-miterlimit="10"
points="1596.182,374.685 .../>
What I am trying to accomplish is to display a popup when we click on a province inside an svg map.
For what your are trying to achieve, I will wrap svg's inside the modal. Something like this:
<Modal>
<svg></svg>
</Modal>
In your modal component, make sure to display svg as children:
return (
<Fragment>
{props.children}
</Fragment>
);
Take a look in the doc for more info: https://reactjs.org/docs/composition-vs-inheritance.html
Following #Robert Longson's comment, I inserted the Modal component inside a foreignObject and it works. Still the Modal window needs to be adjusted manually as far as the x, y coordinates are concerned so that it pops up exactly over the clicked svg element:
<foreignObject x="58%" y="6%" width="200px" height="250px">
<Modal show={show} handleClose={hideModal}>
<p style={{ padding: "10px" }}>Modal</p>
<p>Data</p>
</Modal>
</foreignObject>
Please note that you must set the x,y, height, width attributes for this to work, as documented in this answer React - html tags inside svg
I like the look of the Material UI Styled Component api (not the styled-component library), but I'm having trouble turning my simple button component into a linked button.
How do I insert a react-router-dom link into a MUI Styled Component button?
Previously, the typical Material UI HOC api approach let me add a linked "reports" button as follows. It works great, but requires a lot more boilerplate (not shown here):
<Button
variant="contained"
color="primary"
className={classes.button}
component={Link}
to="/reports"
>
<ShowChartIcon className={classes.buttonIcon} />
Reports
</Button>
#1 Obvious Approach: When I follow this pattern and include the component and to properties my own MUI Styled Component called <MyButton>, I get a typescript error saying those properties don't exist.
#2 Different Approach: Following the pattern proposed in this material ui github issue, the button does indeed link to the reports screen, but the mui variant and color are lost:
<MyButton
variant="contained"
color="primary"
{...{
component: Link,
to: `/reports`
} as any}
>
<MyShowChartIcon />
Reports
</MyButton>
#3 Workaround Approach: A less desirable option is to wrap the button in a <Link>. That does create a working link, but it also brings in a little bit of unintended styling.
<Link to="/reports">
<MyButton
variant="contained"
color="primary"
>
<MyShowChartIcon />
Reports
</MyButton>
</Link>
Using the latest version of material-ui (v4.0.2) you can use the HOC component created with withStyles, but you will have to manually cast the custom component back to its original type:
const MyButton = withStyles(
createStyles({
root: {
color: 'red'
}
})
)(Button) as typeof Button
then you can use your custom component like you would the original one:
<MyButton component={Link} to="/blank-page">
my button
</MyButton>
Here is a working example: https://codesandbox.io/s/createreactappwithtypescript-n6wih
I found this solution from this comment: https://github.com/mui-org/material-ui/issues/15695#issuecomment-498242520.