The title is pretty self-explanatory. I'm wondering what's the proper way to go about using emotion with the classes api of components in version 5.
Since #material-ui is a react lib, I'm mostly using the #emotion/react package, but the classes api expects a string value for its keys, so I have to use the #emotion/css to generate a string className.
<Button
classes={{
root: css({
margin
}),
}}
>
Click me!
</Button>
I have two issues:
It doesn't seem quite right to be jumping between the two packages like this. Is there a better solution?
The rtl-guide in #material-ui docs instructs us to use the stylis-plugin-rtl; The stlyes generated with #emotion/react are transformed correctly, but the one generated with #emotion/css do not get flipped using this plugin.
Any help would be much appreciated.
Related
I'm developing a react project. I use postcss-nested plugin to support css nested rule, and use babel-plugin-react-css-modules to support css modules in react. Finally, the css styles can work well so I'm sure there is no problem with these 2 plugins. But it seems that the vscode can't regonize the css nested rules. It display an underline to give an warning, like this:
Now vscode can't give tips when coding. I have to type the css property names completely. Is there any idea about my problem?
I've also ran into this issue while utilizing nesting. Because nesting is not officially apart of vanilla css VS code is automatically spitting out errors. The best way to fix this issue is to install the VS Code plugin https://marketplace.visualstudio.com/items?itemName=csstools.postcss. this will fix up those nasty little errors. Let me know if that helps you out.
Since I started using NextJS, I've grown quite fond of styled-jsx (I know, not everyone likes it). I'd love to use it in my create react app. Locally it works great. However, react shows me the error:
Warning: Received `true` for a non-boolean attribute `jsx`.
To my understanding, this means that the code does not get transpired by babel. I would need to add the babel plugin to my Create React App Babel config - which isn't possible without ejecting.
I've also read about react-app-rewired but I don't trust it enough to put into production. Is there a more native way to use styled-jsx in my create react app project?
I just happened to answer this in details under another question :) Hope it helps
https://stackoverflow.com/a/66285652/511908
According to the styled-jsx docs, it can be used in create-react-app by using the css.resolve function provided in styled-jsx/macro. Read about it here.
I think this is the intended use but I could not get it working:
import css from "styled-jsx/macro";
export function Login() {
const { demoClass, styles } = css.resolve`
label {
color: green;
}
`;
return (
<label className={demoClass}>Test</label>
);
}
Even if this did work, I dislike it and would rather use styled components or CSS modules (built into CRA, by the way). This is nowhere near as clean as the normal styled-jsx code.
It seems that styled-jsx just does not work well with CRA without ejecting. If you do get it working please let me know, but right now I am going down the CSS modules with Styled Components route.
I'm using react-native-vector-icons in my React Native app, and have the following component:
<Icon
name='rowing'
/>
I used the rowing icon because that was the first example in the documentation here. When you don't supply a value for type, it defaults to material, so I figured I could replace rowing with any of the material icons from this list. When I replaced it with back_arrow, it renders as a question mark. Does anyone know how I can approach debugging this?
If you are using an ejected project make sure that you bundle the library correctly in the android studio here are the full instructions
Otherwise, if you are using expo make sure to use the correct library:
Expo lib
Checklist
Have you done, npm install react-native-elements
As mentioned here, https://react-native-elements.github.io/react-native-elements/docs/getting_started.html
Please cross check in package.json file do u have dependency of "react-native-elements"
Just experimenting with antd's React based UI kit, however it seems that some of the input components not rendering as they should, ex. as a dropdown.
Please see below a random component and how it's being rendered (I added 2 components within mine, TimePicker and DatePicker to demonstrate this)
Looking through the docs I understood that these input or form components must be wrapped within < Form > and < Form.Item >, I tried with and without these.
I also tried both with and without providing default props, still nothing, the documentation doesn't mention these as mandatory ones.
render() {
return (
<div>
<Form>
<Form.Item>
<TimePicker/>
<DatePicker/>
</Form.Item>
</Form>
</div>
);
}
actual: [actual render][1]
expected: https://ant.design/components/time-picker
Thanks guys!
update: I created a new react app on my work mac using npx create-react-app (yesterday I used my personal windows) and had npm i antd. I made sure I have nothing in the new app which could cause issue, only the boilerplate, then I added a component exactly how it is in the ant design documentation.
I am still experiencing the same issue. Sure it's missing something fundamental within ant-design but it seems it's not in the documentation. Anyone who ever used the ant-design components with react, have you done anything specific apart from installing the package and importing the components before using?
It looks like it disregards the css.
In case if anyone else is experiencing this, found the solution:
Antd's css was not applied because I forgot to import it to my App.css:
#import '~antd/dist/antd.css';
Simple mistake to make.
Solution was found in the below link:
https://github.com/ant-design/babel-plugin-import/issues/89
mthrsj also asked about this, I overlooked it when I checked.
I am trying to use material UI with react.
On this website: https://jamesmfriedman.github.io/rmwc/installation
It says
material-components-web should be installed automatically as a peer dependency. Include node_modules/material-components-web/dist/material-components-web.min.css in your project via your method of choice (using a link tag, a css-loader, etc.).
But I am not sure what this actually means. How and where do I have to import that file to use this library?
At first, you should add the library to your project by running:
npm install --save rmwc or yarn add rmwc
Secondly, you should understand the following:
Generally speaking, Material Components Web library is actually a bunch of prebuilt design styles that you can link to your project to make it look Material.
The library that you are using, React Material Web Components [RMWC], is a React wrapper for the previous library. It means that it gives you a set of flexible React Components like <Button />, <TextField />, etc that are built in React and act in a virtual DOM.
It doesn't give any specific styling to the elements. Moreover, it is designed not to provide you any extra styling. To make your imported React components look Material, you should add the styling from the parent library [Material Components Web].
To add styling from that library, use the following:
Add it to your project:
npm install material-components-web or yarn add material-components-web
And then use the following line (use it once in your project):
import 'node_modules/material-components-web/dist/material-components-web.min.css';
RMWC does the ReactJS wrapping. The styling is still all done by MDC.
You can add the minified mdc css file to your project, but that will not give you much customization. I'd advise using sass for your project and importing that mdc modules there. This way you can change variables e.g. from primary color as explained here: https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme
$mdc-theme-primary: #fcb8ab;
$mdc-theme-secondary: #feeae6;
$mdc-theme-on-primary: #442b2d;
$mdc-theme-on-secondary: #442b2d;
#import "#material/button/mdc-button";
A more in depth documentation on how to use styling specifically with RMWC can be found in the docu: https://jamesmfriedman.github.io/rmwc/styling
But overall you can either create your own classes you then apply to your elements such as buttons. E.g.
.my-button-style {
border-radius: 10px;
}
Or you override the mdc classes directly.
.mdc-button {
border-radius: 10px;
}
The mdc classes can be found in each of the package sites on GitHub. (e.g. for button: https://github.com/material-components/material-components-web/tree/master/packages/mdc-button)