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 />
Related
I'm working on a POC with remix + react material (as that's what we use in our main app). I've gotten most things working but I can't get icons to work. Any page that has an icon just hangs and remix yells at me.
Lambda :\Users\chanp\git\my-remix-app\server timed out after 5 seconds
Here's my entry.client. I stole this from the semi-official remix + mui app. I updated the hydrate to work with react 18 (hydrateRoot instead of just hydrate)
import { CacheProvider } from "#emotion/react";
import CssBaseline from "#mui/material/CssBaseline";
import { ThemeProvider } from "#mui/material/styles";
import * as React from "react";
import { useState } from "react";
import { hydrate } from "react-dom";
import { RemixBrowser } from "#remix-run/react";
import createEmotionCache from "./createEmotionCache";
import ClientStyleContext from "./styles/ClientStyleContext";
import muiTheme from "./styles/muiTheme";
import { ThemeProvider as EmotionThemeProvider } from "#emotion/react";
import Layout from "./src/components/Layout";
import { hydrateRoot } from "react-dom/client";
const container = document.getElementById("app");
// const root = hydrateRoot(container, <App tab="home" />);
interface ClientCacheProviderProps {
children: React.ReactNode;
}
function ClientCacheProvider({ children }: ClientCacheProviderProps) {
const [cache, setCache] = useState(createEmotionCache());
function reset() {
setCache(createEmotionCache());
}
return (
<ClientStyleContext.Provider value={{ reset }}>
<CacheProvider value={cache}>{children}</CacheProvider>
</ClientStyleContext.Provider>
);
}
hydrateRoot(
document,
<ClientCacheProvider>
<EmotionThemeProvider theme={muiTheme}>
<ThemeProvider theme={muiTheme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<RemixBrowser />
</ThemeProvider>
</EmotionThemeProvider>
</ClientCacheProvider>,
);
Versions
React v18.2
Remix v1.6
Other verions from package.json
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#mui/icons-material": "^5.8.4",
"#mui/lab": "^5.0.0-alpha.93",
"#mui/material": "^5.9.3",
"#mui/styled-engine-sc": "^5.9.3",
"#mui/styles": "^5.9.3",
"#mui/x-date-pickers": "^5.0.0-beta.4",
I'm not sure what else would be pertinent to this question. Just let me know if I need to provide more details.
Doesn't work
import { Sensors } from '#mui/icons-material'
Works
import Sensors from "#mui/icons-material/Sensors";
I also had to add
"#mui/icons-material"
to
serverDependenciesToBundle
in the Remix.config.js
Guessing ESBuild is to blame here. Still learnig the quirks so an edit of this answer as to why would be good. Or maybe a link to a resource to a more generic explanation as to why.
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 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
On the Jupyter Notebook I can create named outputs that are able to be updated like this:
from IPython.display import HTML, display
import time
def progress(value, max=100):
return HTML("""
<progress
value='{value}'
max='{max}',
style='width: 100%'
>
{value}
</progress>
""".format(value=value, max=max))
out = display(progress(0, 100), display_id=True)
for ii in range(101):
time.sleep(0.02)
out.update(progress(ii, 100))
Whereas in colab it doesn't update the progress bar.
How do you do this in colab?
Good news! This now works in Colab. :)
(Previously, we didn't support update_display_data messages.)
Pasting the code for anyone with sharing issues:
from IPython.display import HTML, display
import time
def progress(value, max=100):
return HTML("""
<progress
value='{value}'
max='{max}',
style='width: 100%'
>
{value}
</progress>
""".format(value=value, max=max))
out = display(progress(0, 100), display_id=True)
for ii in range(101):
time.sleep(0.02)
out.update(progress(ii, 100))
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!