I would like to import a MaterialUI class, without importing the component itself.
Precisely, I'd need the MuiInputBase-root styles. But the class is only defined if InputBase is imported, so solely doing className="MuiInputBase-root" does not work.
Thanks!
You can import the component class like this
import inputBaseClasses from '#mui/material';
// Reference the class in Styled Components:
[`& .${inputBaseClasses.root}`]: {
color: 'black',
}
https://mui.com/base/getting-started/customization/#applying-custom-css-rules
Related
I am learning to use echarts.js for my project.
I would like to know to use the extension echarts-gl (for 3D graphics) with ES modules. The documentation is very succinct and I am just a noobie.
In fact, I am trying to use echarts-gl together with the echarts-for-vue, anyone have tried it?
My main.js looks like this:
import Vue from 'vue';
import App from './App.vue';
import { plugin } from 'echarts-for-vue';
import * as echarts from 'echarts/esm/echarts';
import 'echarts/esm/chart/line';
import 'echarts/esm/chart/bar';
import 'echarts/esm/component/title';
import 'echarts/esm/component/tooltip';
import 'echarts/esm/component/legend';
import 'echarts/esm/component/toolbox';
import 'echarts/esm/component/polar';
import 'echarts/esm/component/visualMap';
// require('echarts-gl/lib/echarts-gl');
// import '../assets/echarts-gl.js';
// import 'echarts-gl/lib/component/grid3D';
// import 'echarts-gl/lib/chart/surface';
Vue.config.productionTip = false;
Vue.use(plugin, { echarts });
new Vue({
render: (h) => h(App),
}).$mount('#app');
I don't know where or how to include the imports for echarts-gl. Do I need webpack configuration?
Sorry about my lack of expertise.
Thanks!
For me it worked when I just imported it like this:
import 'echarts';
import 'echarts-gl';
Also make sure to use a compatible version of echarts-gl with echarts.
(
"echarts": "4.9.0",
"echarts-gl": "1.1.2",
"vue-echarts": "4.1.0",
)
i have file of many styled components vars
export {NavHeader, MainNav, Logo, LogoContainer, NavBarUl, SubUl, Li, SubLi, NavLink, HamburgerContainer}
now i need to import it to the componenets and its very huge
import {
NavHeader,
MainNav,
Logo,
LogoContainer,
NavBarUl,
SubUl,
Li,
SubLi,
NavLink,
HamburgerContainer,
A,
} from "../styles/Header";
there is a way to handle this? and import * or something?
import * as Header from '../styles/Header';
then you can use
<Header.NavHeader />
did recently anyone try to render Style-optimized vector tiles in react-leaflet v3?
I tried following the good examples found here in an old post , but they worked only in v2.
With v3 I get
Attempted import error: 'GridLayer' is not exported from 'react-leaflet'.
And GridLayer is no more there indeed. Any idea?
Thanks
Luca
I solved like that
I created this custom component "StyleLayer"
import { useEffect } from "react";
import { useMap } from "react-leaflet";
import L from "leaflet";
import {} from "mapbox-gl-leaflet";
export default function StyleLayer({ styleUrl }) {
const map = useMap();
useEffect(() => {
L.mapboxGL({
style: `${styleUrl}`,
}).addTo(map);
});
return null;
}
And then I used it inside my "Map" component
<MapContainer center={coordinates} zoom={zoom} scrollWheelZoom={scroll}>
<StyleLayer styleUrl="https://myStyleCloudEndpoint.com"></StyleLayer>
</MapContainer>
The main differences with the old examples linked above hence are:
functional component instead of class (and "useEffect" hook)
"useMap" hook by react-leaflet v3, which gives direct access to the map
I made an NPM package for this: https://www.npmjs.com/package/react-leaflet-vector-tile-layer
It exposes a <VectorTileLayer> component which can also be embedded inside the react-leaflet <LayersControl>
I'm new to reactjs and I'm having a hell of a time understanding this bug.
I've read this, and it seems like the solution is there but I'm drawing a blank on how to implement this correctly:
https://facebook.github.io/react/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
I am trying to render components based on classNames of clicked elements. The classNames match to component names. When I click an element it calls a function that sets the state of my app to that elements className. I then render the component based on the new state.
When testing, if I place the component directly into my app (not rendering the component name dynamically), it works just fine. But when i render the component name dynamically react thinks it's a built-in DOM element and doesn't render properly at all.
In this image you can see both components, rendered next to each other:
both components, first directly added, and the second with the name rendered dynamically
here is my app component code that is rendering everything:
import React, { Component } from 'react';
import logo from '../logo.svg';
import '../css/App.css';
import menus from '../menus';
import MainNav from './MainNav';
import Products from './Products';
import Demos from './Demos';
import Industry from './Industry';
import Customers from './Customers';
import Trials from './Trials';
import Contact from './Contact';
import Newsroom from './Newsroom';
import About from './About';
import Home from './Home';
class App extends Component {
constructor() {
super();
this.chooseComponent = this.chooseComponent.bind(this);
this.state = {
allMenus: menus,
componentMenu: menus,
//sets initial component to load, changes on each click to the clicked component
clickedComponent: Home
};
}
chooseComponent(event) {
//save the classname of the menu i click
var clickedComp = event.target.className;
//saves a reference to a json object for later use
var menu = menus[clickedComp];
//adds those two vars to the state
this.setState({
componentMenu: menu,
clickedComponent: clickedComp
});
}
render() {
//saves a var for rendering the currently clicked component
var ActiveComponent = this.state.clickedComponent;
return (
<div className="App">
<MainNav choose={this.chooseComponent}/>
//renders the components directly without issue
<Products menuData={this.state.componentMenu} />
//renders the component dynamically with problems
<ActiveComponent menuData={this.state.componentMenu} />
</div>
);
}
}
export default App;
here is and example of one of my component being rendered in the App that's giving problems:
import React from 'react';
import products from '../products';
import ProductsMenu from './ProductsMenu';
import Platform from './Platform';
import Applications from './Applications';
import ExMachina from './ExMachina';
import ProductsHome from './ProductsHome';
import Submenu from './Submenu';
import menus from '../menus';
class Products extends React.Component {
constructor() {
super();
this.showContent=this.showContent.bind(this);
this.state = {
productsOverview: products,
content: <ProductsHome />
}
}
render(props) {
return (
<div className="content">
{this.state.content}
</div>
);
}
}
export default Products;
I'm building a simple app with a side menu and two ion-tab. What I am trying to do is, when the screen wide enough, forget about the tabs and open both pages side by side:
To keep the menu visible if the screen is large enough, I am using:
<ion-split-pane when="lg">
And to hide the Tabs:
TS file: this.showTabs = platform.width() < 992;
And then, in the HTML file, I just add the attribute: *ngIf="showTabs"
Is it possible to load two pages inside an ion-content? Any alternative solution?
Any help would be appreciated!
Ok, I've found a solution for this. I'll post it here in case someone experiences the same problem.
We can create a custom component with:
ionic generate component name-of-component
The components can be embedded within the ionic pages. To use them in a Page, you just have to import the component in the .module.ts of the Page and then use the HTML tag with the selector name of the component, as Ivaro18 mentioned:
<component-name></component-name>
If you want to use lazy loading, you can create a components.module.ts inside the components folder to act as an index of all the custom components. It would look like this:
import { NgModule } from '#angular/core';
import { IonicModule } from 'ionic-angular';
import { Component1 } from './component1/component1';
import { Component2 } from './component2/component2';
import { Component3 } from './component3/component3';
#NgModule({
declarations: [
Component1,
Component2,
Component3
],
imports: [IonicModule],
exports: [
Component1,
Component2,
Component3
]
})
export class ComponentsModule{}
Then, in the Pages, we would import ComponentsModule. That would allow us to lazy load any of the components:
<component-2-selector></component-2-selector>
Hope this helps!