I am trying to use breakpoints with {withStyles} from "#material-ui/styles", but the debugger shows that theme.breakpoints is not defined.
I tried to wrap the component with ThemeProvider but it does not work.
https://codesandbox.io/s/material-demo-shgh7?from-embed
withStyles exported with #material-ui/styles not provide theme props, you'll use import { withStyles } from "#material-ui/core/styles";
Exemplo no code sand box arrumado ai
class app extends Component{
render(){
const {classes} = this.props
return (
<div className={classes.root}></div>
)
}
}
const style = theme => ({
root: {
[theme.breakpoints.up('sm'){ //only show on mobile or small screen
display: 'none'
},
}
})
export default withStyles(style)(app)
Related
Remix is prone to the following error when using import on top-level components TypeError: Cannot read properties of undefined (reading 'root').
So I've done as they recommend and have the following imports.server.tsx file.
export * from "lottie-react";
Then my component app.tsx looks exactly like this lottie example.
import React from "react";
import * as Lottie from "../imports.server";
import groovyWalkAnimation from "../../public/assets/102875-cinema-clap.json";
export default function App() {
return (
<>
<h1>lottie-react - Component</h1>
<Lottie animationData={groovyWalkAnimation} />;
</>
);
}
but I get the following error
JSX element type 'Lottie' does not have any construct or call
signatures.ts(2604)
Edit 1:
The following seems to have worked for imports:
imports.server.tsx
import Lottie from "lottie-react";
export default Lottie;
AppTry.tsx
import React from "react";
import Lottie from "../imports.server";
import groovyWalkAnimation from "../../public/assets/102875-cinema-clap.json";
export default function AppTry() {
// console.log(LottieModule);
return (
<>
<h1>lottie-react - Component</h1>
<Lottie animationData={groovyWalkAnimation}></Lottie>
</>
);
}
Now the various paramaters like "animationData" and "autoPlay" pop up on the Lottie component which I assume means the import is working? However I am now getting this error when rendering AppTry.tsx?
react.development.js:220 Warning: React.createElement: type is invalid
-- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to
export your component from the file it's defined in, or you might have
mixed up default and named imports.
Check the render method of AppTry.
Edit 2:
import { useLottie } from "lottie-react";
import Lottie from "lottie-react";
import groovyWalkAnimation from "../../public/assets/102875-cinema-clap.json";
const Example = () => {
const options = {
animationData: groovyWalkAnimation,
loop: true,
autoplay: true,
};
const { View } = useLottie(options);
return View;
};
const Example1 = () => {
return <Lottie animationData={groovyWalkAnimation} />;
};
export const TopicOverview = () => {
return (
<div className="space-y-20">
<Example1></Example1>
<Example></Example>
</div>
);
};
Looks like it has to do with your way of importing Lottie.
Shouldn't you import Lottie like this?:
import Lottie from "lottie-react";
I also struggled to get this working in Remix.
You can do the lazy load import somewhere higher up in the tree too.
import type { LottiePlayer } from "#lottiefiles/lottie-player";
import { useEffect } from "react";
interface LottieCompProps {
src: LottiePlayer["src"];
style?: Partial<LottiePlayer["style"]>;
}
function LottieComp({ src, style = {} }: LottieCompProps): JSX.Element | null {
// NB: otherwise, will cause app to crash. see https://remix.run/docs/en/v1/guides/constraints#third-party-module-side-effects
useEffect(() => {
import("#lottiefiles/lottie-player");
},[]);
if (typeof document === "undefined") return null;
return (
//#ts-expect-error dynamic import
<lottie-player
autoplay
loop
mode="normal"
src={typeof src === "string" ? src : JSON.stringify(src)}
style={{
...{
width: "100%",
backgroundColor: "transparent",
},
...style,
}}
/>
);
}
export default LottieComp;
The issue was in my root.tsx, an ErrorBoundary() function that called an <UnexpectedErrors/> component.
This same component was being called in various slug.tsx files. For some reason remix did not like this.
Having two different <UnexpectedErrors/> and <UnexpectedErrors2/> components - one for the slug.tsx files and one for the index.tsx files fixed this.
I tried googling my problem and it is only showing js files and code.i want to display one thing onpress of button but it is not showing up.i want it to be returned not making item invisible even if it is there.i want to popup in same screen like clicking on button a form and different form on clicking another.
import React, { Component } from 'react';
import {
StyleSheet,
Text,StatusBar,
View,Button,Image,
TouchableOpacity,
Alert
} from 'react-native';
class App extends Component {
constructor(props) {
super(props);
//this.sayHello = this.sayHello.bind(this);
}
sayHello=() => {
return(
<View>
{/* //<Text>hello</Text> */}
Alert.alert('it is visible');
</View>
);
}
render(){
return (
<View>
{this.sayHello}
<TouchableOpacity onPress={this.sayHello}><Text>hi </Text></TouchableOpacity>
</View>
);
}
}
export default App;
I made this simple file as i am unable to resolve many errors..in the place of alert i would add a form.it is showing errors if i return more than one component in the function.
Thanks in advance
I think you want to show another view by pressing a button! If that's what you want here is the code with functional Component!
import React, { useState } from 'react'
import { Pressable } from 'react-native';
const App = () => {
const [show, SetShow] = useState(false);
return (
<View>
<Pressable onPress={() => SetShow(!show)}>
{show === false ? <Text>Hi</Text> : <Text>Hello</Text>}
</Pressable>
</View>
);
};
I'm trying to customize a single IonSelectOption with a custom CSS class to change the color of one IonSelectOption. I am copy-pasting the code from Ionic's documentation but it still isn't working. The CSS className that I provide to the IonSelectOption does not seem to get passed along to whatever interface that it selected. Hope someone can help me out!
Link to Documentation. This is the code I'm using:
import React from 'react';
import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '#ionic/react';
const options = {
cssClass: 'my-custom-interface'
};
export const SelectOptionExample: React.FC = () => {
return (
<IonPage>
<IonContent>
<IonItem>
<IonLabel>Select</IonLabel>
<IonSelect interface="popover" interfaceOptions={options}>
<IonSelectOption value="brown" class="brown-option">Brown</IonSelectOption>
<IonSelectOption value="blonde">Blonde</IonSelectOption>
<IonSelectOption value="black">Black</IonSelectOption>
<IonSelectOption value="red">Red</IonSelectOption>
</IonSelect>
</IonItem>
</IonContent>
</IonPage>
);
};
and the CSS:
/* Popover Interface: set color for the popover using Item's CSS variables */
.my-custom-interface .brown-option {
--color: #5e3e2c;
--color-hover: #362419;
}
in react, it is className, not class
I have been searching the web for a while, but I could not understand how to apply the default dark theme that is shown in the site of Material-ui, where you can toggle between the light and dark theme.
They say those are default ones, but how do I use them?
Thanks!
You can use them by creating a Theme like this:
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
const THEME = createMuiTheme({
palette: {
type: 'dark',
},
});
class YourComponent extends Component {
render() {
return (
<MuiThemeProvider theme={THEME}>
... your other components
</MuiThemeProvider>
)
}
}
export default YourComponent;
The toggle can be done with a button like this example.
I'm trying to make a permanent clipped navigation drawer with Material UI as per https://material.io/guidelines/patterns/navigation-drawer.html
Seems that there is a pull request out for this but not yet merged: https://github.com/callemall/material-ui/pull/6878
At this stage I'm trying to override with styles but can not get my left nav (paper) to apply the style marginTop: '50px',
Are there some samples out there on how to achieve this with v1.0.0-alpha.21?
They changed the way you have to override certain styles in v1. The inline styles no longer work. Certain parts of a component can be overridden with a simple className applied to the component. See this link for further details https://material-ui-1dab0.firebaseapp.com/customization/overrides.
Some deeper nested properties of certain components i.e the height of the Drawer can only be accessed by overriding the class itself. In this case the paper class of the drawer element.
This is a simple example
import React, { Component } from "react";
import Drawer from "material-ui/Drawer";
import { withStyles, createStyleSheet } from "material-ui/styles";
import PropTypes from 'prop-types';
const styleSheet = createStyleSheet("SideNav", {
paper: {
marginTop: '50px'
}
});
class SideNav extends Component {
....
render() {
return (
<Drawer
classes={{paper: this.props.classes.paper}}
docked={true}
>
....
</Drawer>
);
}
}
SideNav.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styleSheet)(SideNav);