I notice that in Material UI Dialog, sometimes it doesn't display the correct layout. For example:
These are the same component. However, it displays different styles. The second style is the one I want it to be. It's really inconsistent. Sometimes it displays the second one, but sometimes it shows the first one. Does anyone know what's going on? I didn't override any textfield styles at all, I just override the global primary colour and font.
My textfield component:
<TextField
error = {error.firstName? true: false}
label="First name" variant="outlined"
name = "user.firstName"
value = {props.newUser.firstName}
onChange = {e => {
props.setUser((prevUser) => ({
...prevUser,
...{firstName: e.target.value} }
));
}}
helperText = {error.firstName && error.firstName}
fullWidth
/>
Are you currently migrating to v5? If yes, I would guess that you still have #material-ui/core in your bundle because it is a peer dependency of some other dependency that you have.
Try running yarn why #material-ui/core (or npm ls #material-ui/core) and check if this is the case.
You would need to upgrade the dependencies that depend on #material-ui/core to the specific version that depends on #mui/material.
Related
I have a custom component and would like to apply the exact same styles as the <Typography> component gets when setting the noWrap prop. The following does work:
<span className="MuiTypography-noWrap">
But there's of course no actual type-checking or "link" to anything here, which means if the name ever changes or is removed in a future version, I won't get any type/build error from it.
Is there a "Material UI way" to reuse/copy these classes? E.g. is there somewhere I can import/access these names from?
I assume you have a reason, but given your example of a span element, I can't help but wonder why you're not just using the MUI component.
I've never done this before, but I was curious and the styles are indeed exported. Not sure if this is a good idea or if there is another way...
import { styles } from '#material-ui/core/Typography/Typography';
const noWrapStyles = styles(theme).noWrap;
I'm creating an electron-app that uses Microsoft fluent-ui lib. I have added the reference #fluentui/react": "^7.107.1 to the package.json file. When I then create a Dropdown like this
<Dropdown
label='Time zone'
onChange={(e, option) => this.updateTimeZone(..)}
/>
The caret with the drop down icon is missing.
When inspecting the element, it seems as the i-tag is empty and does not have the right font applied in the css-class, when compared to examples in the documentation.
Could someone see what I'm doing wrong?
By default, the Fabric icons are not added to your bundle, in order to save bytes for scenarios where you don't care about icons, or you only care about a subset.
To make them available, you may initialize them as such:
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
initializeIcons(/* optional base url */);
After update from v3 to v4.8.3 do not work customizing components. My goal is to override Select component to get text color 'red'.
const styles = theme => ({ temp: { fontSize: 12, color: "red" })
...
<Select classes={{ root: classes.temp }} ....> ...</Select>
but MuiInputBase-input class always stay on top.
https://i.imgur.com/JGK7J89.png
I see that there are diffrents in styles loading by html head import, my current version(v4) is:
https://i.imgur.com/gAlECET.png
I see that import is doubled, and overrides my custom style.
On v3 all mui styles imports was placed on top of list and not mixed vs custom styles. I cant find more info to get solution and reason of doubling imports. where error may arise?
edit:
i must give some more details...
Problem appered after a big legacy project was updated. For represet my problem, i cut most of code and create demo on codesandbox .
Unfortunately it work fine on codesandbox, and dont let see a problem. if i download zip and start it - i have my problem. Tried on two machine ubuntu 18.04 and MacOS, both have that problem - colour red dont applied to second select. Some more detail are in issue if it will helpfull for someone. Reason in solution below
I have created sandbox for you where you can see the overwritten menu items.
Code sandbox: https://codesandbox.io/s/override-select-component-material-ui-c1io6?fontsize=14&hidenavigation=1&theme=dark
The reason was that nested component has wrong import statement. Wrong import that was work "properly" in v3 for some reason:
import InputBase from "#material-ui/core/InputBase/InputBase";
must be:
import InputBase from "#material-ui/core/InputBase";
becouse it, my styles was overriding by base style
Let's say I want to check this component render its child with the right initial props
const { container } = render(<Header/>)
Where is
<div> <SomeChild custom-prop=innerHeaderVariableLikeInitialState /> </div>
Before I can try to check anything when I run my test I get the prop 'custom-prop' is marked as required but it's value is undefined (I use prop types)
So it means the react-testing-library doesn't initialize its child componenent ?
How to manage this ? I feel I'm not taking this with the right angle
Thanks
What you're looking for is probably container.firstChild.
However, testing for the presence of certain props goes against the "don't test implementation details" approach of react-testing-library. Really, there's no way to do that with the rendered output, as it's all DOM elements, not React components. Instead, consider what user-facing elements you could look for, like text, accessibility labels, etc. How can you verify the user is seeing what you expect them to see?
I recently migrated an app to mui v4, which I love.
Also done is updating our test suite that runs with jest/enzyme. For example I now favor mount instead of shallow.
One problem is that I cannot find a way to test icons presence.
I am using all latest version of material-ui, react and tooling like jest/enzyme, etc, at the time of writing
In MUI source code, I see things like this in the spec files:
wrapper.find('svg[data-mui-test="KeyboardArrowLeftIcon"]'
Here is in createSvgIcon source how this prop declared:
<SvgIcon {...props} data-mui-test={`${displayName}Icon`} ref={ref}>
HOWEVER, I cannot find any reference to that data-mui-test prop in my own node_modules file in #material-ui/icons/utils/createSvgIcon.js:
var Component = _react.default.memo(_react.default.forwardRef(function (props, ref) {
return _react.default.createElement(_SvgIcon.default, (0, _extends2.default)({
ref: ref
}, props), path);
}));
And, as a matter of fact, wrapper.debug() in the tests shows that the prop is absent from the DOM:
[...]
<svg
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
color={[undefined]}
aria-hidden="true"
role="presentation">
[...]
Questions
Why is data-mui-test prop is removed from generated npm module code?
Is this still the right way to test icons presence? (as suggested here by mui team member)
The standard testing technique of data-testid works for these icons, i.e.:
<Warning color="warning" data-testid="warning-icon" />
Then in your test
expect(documentBody.getByTestId('warning-icon')).toBeInTheDocument();