I'm using the MGT with React. I am trying to style the component in the same fashion as the rest of my application (reactstrap).
I've found the custom CSS properties you can set, which has got me 90% of the way there, but I need to be able to adjust the margins of the control (margin-left: -3px) and I can't seem to do this no matter what I try.
I think the answer to my problem lies in using the templating functionality but the documentation is a bit lacking for this.
Any ideas where I should start with this? Am I on the right track? Does anyone know of an example of using templates with the PersonPicker component?
Without specifics, there definitely might some css properties that we haven't exposed yet. I don't think there would be any recommended code to use here, instead I'd highly suggest opening a an issue on our github repo as a feature request. We can then work with you on improving the toolkit with these properties.
Related
Some background
Our team has been using Material-UI (MUI) for quite some time, and we love it. With the release of MUI v5, we took the time to check which styling solution we would use next, since JSS is being abandoned by the MUI team.
We ended up following a discussion from the folks at Shopify. They made a very detailed comparison of styling solutions, and ended up with vanilla-extract as their tool of choice. Strong TypeScript support and, foremost, the zero-runtime-approach, got us convinced.
Sadly, vanilla-extract had not been considered by the MUI core team in their decision making.
Question at hand
MUI, according to their docs, enables the user to use various styling solutions. The styling engine used under the hood can be configured, as roughly described here.
Questions:
is it (conceptually) possible and (pragmatically) reasonable to use vanilla-extract for:
styling MUI components?
using it as the style engine underlying MUI?
where would sprinkles come into play?
what would be the concrete steps for implementing this approach?
has somebody done this already, and would be willing to share their code? 😇
Contrary to common practice, I haven't really tried anything yet, implementation-wise. From my understanding, this would mean creating something along the lines of mui-styled-engine (wraps emotion) and mui-styled-engine-sc (wraps styled-components). Since that seemed pretty involved to me, I thought I'd ask first.
The detailed comparison you provided doesn't includes jss.
But you can use jss directly without a setup from MUI.
Use react-jss. I don't know about zero runtime thing but they also support typescript and will be easy for you to migrate your existing stylesheets written on MUI4. You just need to change the function names such as makeStyle to createUseStyles.
Here is the whole doc - https://cssinjs.org/react-jss/?v=v10.9.0
I personally like jss because it helps to keep styles intact from the actual components. I have use it over MUI 5 provided styled engines and really much happy with the results.
I'm trying to find some information on how to implement a resize windows REACT component for a project. I posted a picture and would love a resize windows option here, but I can't find a good resource to research how to implement this. I'm not sure if I'm using the correct terminology. Could you please point me in the direction to research this?
Thank you
https://www.npmjs.com/package/react-splitter-layout
Ended up using this and the implementation was very easy.
any suggestion for a native reactjs component that supports
treegrid grouping such as https://datatables.net//forums/discussion/37920 ?
Hopefully, I can help you. Correct me if I am not fully understand your question. I use react-bootstrap-table. which is easy to use, but you need to take care of the CSS global element. I got some bugs before, I recommend use the CSS module to solve these CSS conflict.
I have created an website/application using Angular2. The infrastructure is all set, I have routing completed, sass being processed etc.
I have sections (components) on this website that will display current web standards for our designs (buttons, forms, copy). The purpose of this site is to give our developers a copy/paste solution for markup and sass.
We will most likely create our own css library but they will still need a good visual reference of what each class does and a copy/paste solution.
I know how to develop all the standards, what I don't know how to do is have the DOM display options for the user to copy/paste the code. I could manually enter the code into or tags but this will be hard to maintain and not very clean approach. I'd like to find some solution that will utilize my code and create these tags at run time.
Googling this question leads down the road of using living style guide generators, which i don't want to use... why? I like having the functionality of controlling my own layout and scaling my standards as I see fit with our own technology.
Any ideas?
After exploring this even further I ended circling yet again on documentation tools (KSS) where I would need to rebuild my entire style guide for this functionality using markdown and or JDOCs.
Solution!
Use CodePen, its free to signup however there are some nice to have features for a monthly fee. I easily created my code here using SASS, HTML and CSS libraries. CodePen has a great EMBED feature whereas I could copy/paste html or iframe right to my styleguide.
Problem is now solved, and we have have a dynamic Web & UI Styleguide.
Hope this method helps others in my situation.
By good, I mean using hooks/filters.
Basically, by default the two options are Images and Uploaded to this page. I would like to add an additional option in there. I know how to add a new tab to the media manager (see here), but that doesn't achieve what I need.
I've been looking through the limited documentation on 3.5 and have found the media_view_strings/settings filters, but, based on what I can tell, neither could be used in this case. I've also done quite a bit of digging through the core source, but the number of files relating to the media uploader is daunting to say the least.
I thought about running JS after page load to modify the DOM and just add the extra select option in, but this seems very hackish and I'd like to avoid it if there is a better, more robust solution.
Any thoughts on the best way to approach this would be greatly appreciated!
Note: I didn't post this to the WordPress SE Site since it gets much less traffic and the questions tend to be much less programming-related.
Most of those select-dropdowns are from wp-includes/media-template.php, which has a lot of Underscore templating (<script type="text/html" tags), but few action hooks for php code. With Javascript you can bind the Backbone.js hooks for wp.media events, such as wp.media's open/close events. From such event you could grab that Images/uploaded-to-page selectbox with jQuery('.media-modal-content:visible .attachment-filters'), add item(s) and listeners as needed. I'm pretty sure there should be a much better Backbone.js-style solution, though.
Here is a tutorial by Shiba Shake on this subject ...
How to Expand the WordPress Media Manager Interface
Hope this is helpful to you!