The RaisedButtons components don't go fullWidth anymore in the version v0.15 of material-ui, this worked in the v0.15-beta. I solved it by adding minWidth: '100%' to the element. Is this intentional or am I doing something wrong here ?
const buttonStyle = {
minWidth:'100%',//<- works with minWidth set
};
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div style={style}>
<SelectField max-height={200} style={selectStyle} fullWidth={true} onChange={this.onFondsSelect} value={displayValue} id="fonds-selection">
{this.menuItems}
</SelectField>
<RaisedButton style={buttonStyle} onClick={this::this.startClick} fullWidth={true}>Button 1</RaisedButton><br/>
<RaisedButton style={buttonStyle} onClick={this.resetStart} fullWidth={1}>BUtton 2</RaisedButton>
</div>
</MuiThemeProvider>
);
This bug was introduced in material-ui v15
issue => github.com/callemall/material-ui/issues/4226
However as you can see in the issue comments, the fullWidth may be deprecated in v16 in favour of the style object. So you are doing it the right way.
Related
I've just started assembling my projects with Vite. And noticed that VSCode doesn't inform you about your mistakes anymore. Component just doesn't work properly and I don't see any underlines. So I did something like this:
const BasketItem = ({ removeFrromOrder, id, name, price, quantity }) => {
return (
<ListItem>
<Typography variant='body1'>
{name} {price}руб x{quantity}
</Typography>
<IconButton onClick={() => removeFrromOrder(id)}>
<Close />
</IconButton>
</ListItem>
);
};
<BasketItem key={item.name} removeFromOrder={removeFromOrder} {...item} />
Nothing is underlined. Usually the last string of code would be underlined since component expects removeFrromOrder with two 'r' (which is typo :)
Any ideas why it would be happening? Is it connected with Vite in any way?
Trying to upgrade from MUI 4 to 5. In MUI 4, I used to be able to introduce adhoc classes using makeStyles:
const useStyles = makeStyles((theme: Theme) => ({
root: {
cursor: 'pointer',
},
}));
export const FakeLink = ({ children }) => {
const classes = useStyles();
return (
<span className={classes.root}>
{children}
</span>
);
};
Now trying to put the same cursor: 'pointer' on an ImageListItem. How do I do this?
<ImageListItem>
<img ... />
</ImageListItem>
I thought I could do it using sx, but it doesn't implement the cursor property. What am I missing?
The cursor property should be supposed by the sx and styled API. Maybe you are facing a TypeScript issue?
I'm trying to use a custom Input component on a Typeahead with the multiple option set. I see in the docs it says to "handle the refs" correctly, but I see no examples of how this is done. I'm not sure what to pass into referenceElementRef. Everything I've tried so far just doesn't render the options as I type. I see them in the DOM, but the opacity of the .rbt-menu is set to 0, so they're basically hidden.
Here's my code so far:
const divRef = React.useRef(null);
return (
<Col>
<div ref={divRef}>
<span className="uppercase">
<FormattedMessage id="d.customer" defaultMessage="Customer" tagName="h4" />
</span>
<AsyncTypeahead
multiple
id="customer-filter-input"
inputProps={{
'aria-label': 'Customer search',
style: { fontSize: '14px' },
}}
key={'customer-input'}
minLength={4}
isLoading={props.isLoadingcustomersSuggestions}
delay={300}
onSearch={(term: string) => handleFilterInputs(term, 'customers')}
size={'lg'}
options={dataSource}
labelKey={'defaultMessage'}
placeholder={intl.formatMessage({
id: 'companyName',
defaultMessage: 'Company name',
})}
onChange={(filterItem: any) => handleAutocompleteUpdate(filterItem, 'customer')}
renderInput={({ inputRef, referenceElementRef, ...inputProps }: any) => (
<Input
{...inputProps}
style={{ position: 'relative' }}
ref={(input: any) => {
inputRef(input);
referenceElementRef(divRef); // What do I put here?
}}
/>
)}
/>
</div>
</Col>
);
And this is what renders in the DOM after I type in the Typeahead and get results:
Any ideas or working examples of Typeahead using multiple and renderInput together?
EDIT:
Here's a codesandbox of what I'm seeing. I also see that the problem is also happening when multiple is NOT set. It seems to be an issue with using renderInput. Is it required that I also use renderMenu?
https://codesandbox.io/s/react-bootstrap-typeahead-async-pagination-example-forked-3kz3z
If you upgrade the typeahead version in your sandbox to the latest version (v5.1.1) and pass the input element to referenceElementRef, it works (note that you need to type some characters into the input for the menu to appear):
// v5.0 or later
renderInput={({ inputRef, referenceElementRef, ...inputProps }) => (
<Input
{...inputProps}
ref={(input) => {
inputRef(input);
referenceElementRef(input);
}}
/>
)}
The menu is rendered in relation to the referenceElementRef node by react-popper. In most common cases, the reference node will be the input itself. The reason there's both an inputRef and a referenceElementRef is for more complex cases (like multi-selection) where the menu needs to be rendered in relation to a container element around the input.
If using v4 of the component, the approach is similar, but the ref to use is simply called ref:
// v4
renderInput={({ inputRef, ref, ...inputProps }) => (
<Input
{...inputProps}
ref={(input) => {
inputRef(input);
ref(input);
}}
/>
)}
I am trying to create a draggable list using Material UI and react-beautiful-dnd. I followed the tutorial on their page and created this-
function DraggableList(props) {
const { classes, tableHeaders, tasksList } = props;
return (
<div>
<Droppable droppableId="id">
{(provided) => (
<div ref={provided.innnerRef} {...provided.droppableProps}>
{tasksList && tasksList.slice(0,5).map((row, index) => (
<Draggable draggableId={row.id} index={index}>
{(provided)=> (
<div index={index} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<Paper className={classes.root} key={row.id}>
<Grid container xs={12} className={classes.topContainer}>
<Grid item xs={2}>
<IconButton><DragIndicatorIcon className={classes.dragIcon}/></IconButton> </Grid>
<Grid item xs={10}>
<Typography className={classes.activity} variant="body2">{row.name}</Typography>
</Grid>
</Grid>
</Paper>
</div>
)}
</Draggable>
))}
</div>
)}
</Droppable>
</div>
);
}
It keeps giving me
Error: Invariant failed:
provided.innerRef has not been provided with a HTMLElement.
You can find a guide on using the innerRef callback functions at:
https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md
error though I am setting innerRef on a 'div' . What is the mistake here
Typo:
ref={provided.innnerRef}
I had the same problem, but my solution was quite different. I made the silly mistake of using curly bracket instead of parentheses. So I did:
{(provided) => {
And not:
{(provided) => (
No error indications whatsoever other than "provided.innerRef has not been provided with a HTMLElement."
You put
provided={provided}
in the same div it will start working. I also had the same issue but it got resolved with this.
I had the same problem and I used styled-components. I just set the ref prop on the styled-component element and it worked for me.
I mean this:
const StyledElement = styled.div`
//the css goes in here
`;
<StyledElement ref={provided.innerRef} {...provided.droppableProps}>
//The rest of the code goes here
<StyledElement/>
I'm building a new project with SSR using Next.js, MaterialUI and styled-components. From what I know, MaterialUI uses JSS as a tool for SSR (according to the example in its repository). I wonder if anyone knows how I can make it work with styled-components. I opened issues in MaterialUI and styled-components repositories, both authors answered me that they don't know how to make it work together. But probably anyone did it already? Or at least can tell me where to dig to solve this problem. Thanks in advance!
You can use styled-components with material ui, but you'll end up needing to use !important a lot. Like this:
import Button from "material-ui/Button"
const MyButton = styled(Button)`
background: red !important;
`
In the project I'm working on with the same combo, I've just resorted to using the JSS style material-ui wants you to use with the whole withStyles HOC..
You may check their docs here https://material-ui.com/guides/interoperability/#styled-components, you may check the deeper elements section if you want to override specific classes https://material-ui.com/guides/interoperability/#deeper-elements
below is my example where for the switch component
const StyledSwitch = styled(({ ...other }) => (
<div>
<Switch
{...other}
classes={{ colorSecondary: 'colorSecondary', checked: 'checked', bar: 'bar' }}
/>
</div>
))`
& .colorSecondary.checked + .bar {
background-color: ${props => props.theme.lighter.toString()};
}
& .colorSecondary.checked {
color: ${props => props.theme.default.toString()};
}
`;
export default StyledSwitch;
usage
<StyledSwitch theme={lightTheme.secondary} />
this is using a theme but you can specify any color you want
Looks like we have 3 ways (could be easier, but not everything is flowers) to override Material UI styles with Styled Components. Here is my Gist.
I do it like this:
In head component of app:
const styleNode = document.createComment('insertion-point-jss')
document.head.insertBefore(styleNode, document.head.firstChild)
const generateClassName = createGenerateClassName()
const jss = create({
...jssPreset(),
insertionPoint: 'insertion-point-jss'
})
<JssProvider jss={jss} generateClassName={generateClassName}>
<Main />
</JssProvider>
and then just style:
import styled from 'styled-components'
import Select from '#material-ui/core/Select'
import Input from '#material-ui/core/Input'
import React from 'react'
export const InputM = styled(({ ...other }) => (
<Input {...other} classes={{ input: 'input' }} />
))`
color: ${p => p.theme.textColor};
& .icon {
font-family: ${p => p.theme.fontFamily};
font-size: ${p => p.theme.fontSize}px;
color: ${p => p.theme.textColor};
}
`