I'm trying out Google's Material Design stuff, and there's something I'm having a problem with that you guys might be able to help.
I want to have a different theme per "major" module in my app.
I tryed using
$mdThemingProvider.theme('default');
In the config of each module, but I'm getting that theme is undefined. The only methods available are setDefaultTheme and alwaysWatchTheme
I'm using the latest stable release as I just installed via
bower install angular-material --save
Can you guys spot what I'm doing wrong?
UPDATE:
So I posted an issue on github and found my problem (the documentation online is for the master branch not the stable branch
https://github.com/angular/material/issues/1039
But I'm still trying to figure out how I can assign different themes to different modules
Looking further down the strand of the issue you posted to github, I noticed the suggestion to update your version of angular-material in bower.json.
"angular-material": "0.7.0-rc1-master-84842ff"
This worked for me and now I'm able to define my own theme just like was specified in the docs.
$mdThemingProvider.theme("customTheme").primaryColor("pink").accentColor("green");
Related
I am trying to render 3D files in my react project. I am using ThreeJS for my react project of version 16.13.1. After installing #react-three/fiber & #react-three/drei these packages, I am getting error of Module not found: Can't resolve 'react-dom/client'. After searching solution for this I get to know that for these we have to upgrade React version to 17 or above. I did it in demo project & it worked. But the restriction is that I can not update actual project version from 16 to 18 as it will change or break so many things as well as I have to take care of other dependencies. Is there any solution available for using ThreeJS with React v16.
Or if there is any other way or different packages available to render 3D files (like .glb, .gltf) please share with me.
Thank you in advance.
How to find a version of a library that supports particular version of react?
Google <library-name> npm
Go to npm page
Go to repository (usually github)
Open package.json
Check version of react; if it's matching your version go to 7.
Change tag to some previous version; go to 5.
#react-three/fiber & #react-three/drei for react 16.13.1
These two should work:
#react-three/fiber 4.2.21
#react-three/drei 3.2.0
npm install #react-three/fiber#4.2.21 #react-three/drei#3.2.0
Disclaimer
You can never know if the packages work without trying. Many things changes and bug fixes only apply to the newest versions.
I found one package react-3d-viewer to render 3D files which perfectly work for me.
Google model viewer also works and it comes with variety of props which is good for customization of rendered 3D model.
https://github.com/dwqdaiwenqi/react-3d-viewer
https://modelviewer.dev/docs/index.html
I am new to react and I am even newer to typescript. I am working on this project right now and I need to use this specific git repository which is a typescript project. I want to add react-reveal so I can have some cool animations on my website but I get this error message.
I am not sure why this specific library is not working because I have installed other librarys like reactstrap. If anyone could give me any information on how to get this to work or why this isn't working it would be much appreciated!
React-reveal doesn't seem to be actively maintained as it was last updated on August 2018.
Based on the error you received it looks that there is a library that is explicitly configured to only work with React v15 or v16. You could use a slightly older version of React that works with react-reveal. You're using React 17.0.2. You could try using React v16.14.0.
You could also follow the instructions in the error message - using the force option. Here is a link(npm: When to use `--force` and `--legacy-peer-deps`) that describes how that works.
A better way to go is search for a more popular actively maintained alternative like react-spring(https://react-spring.io/) or react-awesome-reveal(https://www.npmjs.com/package/react-awesome-reveal).
I found the problem, you must put this command in the terminal => npm config set legacy-peer-deps true
First please bear with me. I do not think that this question is appropriate for Stack Overflow. I first tried to ask this question in the official GitHub repository of this project, but they strongly suggest to ask question in Stack Overflow with corresponding tags, so here I am...
The point is that is strange for me that I can not find official documentation and examples of Fluent UI React Charting components in the official website of Fluent UI React, even though the official NPM package is public and is being constantly updated.
To be fair, I found this website but It looks outdated. Any help will be much appreciated.
Potentially this can help you.
clone the repo
git clone git#github.com:microsoft/fluentui.git
then navigate to the charting folder, and install the deps (they use yarn by the looks of things)
yarn install
then start storybook
yarn start
You'll see this.
Storybook will cover the components inside the lib from what I can see, in terms of what they have on offer. That being said they still don't document the props & how to configure the components... but you should be able to sift through the storybook code to see how they got the charts to render inside storybook at least.
Not the best documented library ever... but perhaps that can get you going :)
I've started learning React with Redux and part of my development has seen me want to use the Material UI to make my application more interesting. I created my project in Visual Studio 2017 using the React with Redux template for ASP.NET Core.
I followed the documentation presented at the MatrialUI site and opted to use the CDN option for delivery of the MaterialUI library.
I started creating a few elements and was quickly confronted with the message that I needed to upgrade my react installation to use the Toolbar.
My question is, when we use the Visual Studio React/Redux ASP.NET Core template, how do I update my react installation? Is that carried out via NPM? I can't see any nuget packages relating to React.
Many thanks
Hey not sure if you found an answer yet but here is my take:
I tried using npm update inside the "ClientApp" folder, but that didn't seem to work. Something that did work though was manually updating each package. So open up a separate terminal -> cd into the ClientApp directory and then
npm i <package name>#<newest version>
so an example would be
npm i react#16.8.6
Some packages you will definitely need to update are React, React-DOM and rimraf. But you might choose to just update all of them while you're at it. When you're using ASP.NET Core try and go for the 2.2 version, which at least already has Bootstrap 4 installed.
Another tip: With Visual Studio, if you hover over the package names in the package.json file inside, it will show you the latest version. That's gonna make it a bit easier to find out what version you want to update to.
Hope that helped! And if anyone has a better solution please let me know.
I want to use my UI components as a reusable seperate repo/project for my react-native iniit App.
So i creatd a seperate project folder like this
and installed these dependencies
and few dependencies externally with my other app.
Then i used
yarn link
to link this project to my working app as a module just like a node module. but i get this error when i try to run my app?
Is there an issue with my method, or is there a sure way i can try to reach my goal because i found multiple ways and various configuration of creating such component libraries.but i didn't use any since the end goal is different.
This is a known issue with the React Native packager. See this discussion: https://github.com/facebook/react-native/issues/637.
This may have to do with using watchman, although there seem to be a few different cases where this can crop up.
TL;DR: React Native packager does not respect symlinks to projects, so npm and yarn link do not work like you would expect them to. Apparently this is being resolved in metro-bundler: https://github.com/facebook/metro-bundler/issues/1.
Unfortunately the workarounds are not that pretty, but there are a few options discussed in the issue 637 discussion. It also looks like you may be using a github repo for your package.
You could tell npm to get your library from github via your project's package.json, so you probably do not need npm link, though you will not be able to link to your local files for your module this way.