I have problem, I use this piece of code to responsive layout. In my computer when I use programming tools to watch how my code look in phone size, it look perfect but when I deployment it this not work at all.
I do not understand why, because I have the same piece of code in another sub-page, and there it work good.
import MediaQuery, { useMediaQuery } from "react-responsive";
const Phone = useMediaQuery({
query: "(max-width: 641px)"
});
<Card style={{ width: Phone ? '100%' : "32%", float: "left", backgroundColor: "#003263", height: "380px"}} >
Hello I had the same problem, I searched for several solutions, but I ended up using material UI.
import React from 'react'
import useMediaQuery from '#mui/material/useMediaQuery'
const ProductCard = ({ name, category, description, tech, url, image, color }) => {
const isMobile = useMediaQuery('(max-width: 786px)')
return (
<div style={{ margin: isMobile ? '0px' : '18px' }}>
<p>{name}</p>
<p>{category}...</p>
</div>
)
}
export default ProductCard
It worked perfect, on mobile in the first render it detects the variable correctly and makes the css change, but you would have to install MUI
Related
I am using this api to create customize google calendar.
https://github.com/ericz1803/react-google-calendar
Here are the codeSandbox for demo, the tooltip is perfectly working.
https://codesandbox.io/s/cocky-rgb-2y3t7?file=/src/App.js
Then, I copied the same code into mine project with all path, API ... changed.
Every things works well, but the tooltip doesn't appear any more.
import React from "react";
import "./styles.css";
import Calendar from "#ericz1803/react-google-calendar";
import { css } from "#emotion/react";
const API_KEY = "AIzaSyAKzScoADeBmp6qUsEzrwZhLqb6WARNFOo";
//replace calendar id with one you want to test
let calendars = [
{ calendarId: "c_7q0ai3mn1p9b880f7llhbnv364#group.calendar.google.com" }
];
let styles = {
//you can use object styles
calendar: {
borderWidth: "3px" //make outer edge of calendar thicker
},
today: css`
/* highlight today by making the text red and giving it a red border */
color: red;
border: 1px solid red;
`
};
export default function App() {
return (
<div className="App">
<body>
<div
style={{
width: "90%",
paddingTop: "50px",
paddingBottom: "50px",
margin: "auto",
maxWidth: "1200px"
}}
>
<Calendar apiKey={API_KEY} calendars={calendars} styles={styles} />
</div>
</body>
</div>
);
}
There is open issue for same on github.
Till it gets fixed, use the same version of the package which is used in the sandbox demo, it doesn't have that bug.
"#ericz1803/react-google-calendar": "4.0.1"
I'm using Styled Components in my app. I am collecting state via useSelector using React-Redux, this state returns either a 0 or 1 - 0 telling me the app is currently in light mode, 1 telling me the app is currently in dark mode.
How do I edit the style based on the value? I have tried the following...
const Logo = styled(motion.h1)`
color: ${themeColour ? "white" : "black"};
`;
However, this didn't work as the variable exists inside a function. I then tried to style the h1 component directly in the JSX like this...
<h1 style={{color: ${themeColour ? "white" : "black"}}}>
I got the following error...
"./src/components/Nav.js
SyntaxError: C:\Users\james\Documents\Web Development\Portfolio\Project 1 - RelaxStation\Code\relax-station\src\components\Nav.js: Unexpected token, expected "," (14:26)"
Could someone help me figure this out please? Below is my full code for the component (please note I couldn't indent it correctly when pasting the code in here, but it is correct in Visual Studio Code)...
// Libraries
import styled from "styled-components";
import { motion } from "framer-motion";
// Redux
import { useSelector } from "react-redux";
const Nav = () => {
// Get current theme colour code - Gives a 0 for light mode or a 1 for dark mode
const themeColour = useSelector((state) => state.theme);
return (
<StyledNav>
<Logo>
Relax<span>Station</span>
</Logo>
<div className="main">
<h4>MAIN</h4>
<ul className="main-links">
<li>Home</li>
<li>Artists</li>
<li>Albums</li>
</ul>
</div>
<div className="playlists">
<h4>PLAYLISTS</h4>
<ul className="playlist-links">
<li>Early morning</li>
<li>Studying</li>
<li>Driving</li>
<li>Ambience</li>
</ul>
</div>
</StyledNav>
);
};
const StyledNav = styled(motion.nav)`
position: static;
width: 10rem;
top: 0;
left: 0;
min-height: 95vh;
border: 2px solid rgba(255, 255, 255, 0.125);
`;
const Logo = styled(motion.h1)`
color: ${themeColour ? "white" : "black"};
`;
export default Nav;
Thanks in advance
You need to pass on the themeColor as a prop to tthe Logo component while render
<Logo themeColor={themeColor}>
Relax<span>Station</span>
</Logo>
and then use it with styled component like
const Logo = styled(motion.h1)`
color: ${props => props.themeColour? "white" : "black"};
`;
For the h1 tag your code didn't work because your syntax was incorrect
Below is the correct usage
<h1 style={{color: themeColour ? "white" : "black"}}>
I see that it is possible to embed React components with MDX:
https://v2.docusaurus.io/docs/markdown-features/#embedding-react-components-with-mdx
However, this method works for a specific page. How can I make it work for all markdown files in the docs? I am trying to add a similar component as in the link above to change the style of some inline text. I tried to edit src/pages/index.js but it didn't work.
const HighlightGreen = (children) => (
<span
style={{
backgroundColor: '#00a400', // green,
borderRadius: '2px',
color: '#fff',
padding: '0.2rem',
}}>
{children}
</span>
);
It seems now you could "swizzle" the root component, by creating a website/src/theme/Root.js file, according to: https://docusaurus.io/docs/using-themes#wrapper-your-site-with-root
yarn swizzle #docusaurus/theme-classic MDXComponents --danger
In src/theme/MDXComponents/index.js:
import {MyComponent} from "/src/components/MyComponent";
...
const MDXComponents = {
MyComponent,
...
I want to show/hide elements on certain break points, like what I would do with Bootstraph or Zurb Foundation.
I see in the documentation here https://material-ui.com/system/display/#api we add
display={{ xs: 'block', md: 'none' }}
to our elements. I have done this, but I don't get any results - no hiding/showing elements, no errors, no compilation problems.
Would anyone know how this is done?
My code is:
import React from 'react'
import PropTypes from 'prop-types'
import makeStyles from '#material-ui/core/styles/makeStyles'
import Button from '#material-ui/core/Button'
const useStyles = makeStyles(styles)
const PhoneActionLink = ({ children, prefix, href, value, display, isFirst, ...other }) => {
const classes = useStyles()
return (
<Button
display={{ xs: 'block', md: 'none' }}
{...other}
>
{children}
</Button>
</div>
)
}
Here you go with a solution
import React from 'react'
import PropTypes from 'prop-types'
import makeStyles from '#material-ui/core/styles/makeStyles'
import Box from '#material-ui/core/Box'
import Button from '#material-ui/core/Button'
const useStyles = makeStyles(styles)
const PhoneActionLink = ({ children, prefix, href, value, display, isFirst, ...other }) => {
const classes = useStyles()
return (
<Box component="Button" display={{ xs: 'block', md: 'none' }} m={1}>
{children}
</Box>
)
}
Wrap the Button component within Box component.
The answer strictly depends on the version of MUI you're using.
The accepted answer should work for MUI v4 and prior versions, but didn't work for me (MUI v5).
I dug into the documentation From the official MUI website and found that the following code works for me:
<Box sx={{ display: { xs: 'block', md:'none' } }}>
{children}
</Box>
I'm guessing that the sx attribute allows you to modify some of the CSS properties based off specific breakpoints.
I'm no expert so I can't fully explain the solution, but I'm hoping that this solution helps another person out there.
Along with the other solutions, you could also use the component. Although it's deprecated now.
I'm trying to learn how to use Material UI with React.
I have incorporated v1 of Material UI in my project.
Nothing about coding comes intuitively to me, so I struggle to fill the gaps between the clues left in the documentation for resources.
I know I haven't got the hang of this yet, but piecing together what others have been able to do, I have set up a button in my project, as follows:
import React from 'react';
import Button from 'material-ui/Button';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { fade } from 'material-ui/styles/colorManipulator';
const MyButton = (props) => {
return <span>
<Button {...props} />
</span>
};
export default MyButton;
I then try to use my button in a couple of places:
import React from 'react';
import MyButton from '../materialui/Button.js';
const style = {
background: '#FF5349',
color: 'white',
padding: '0 30px',
// marginBottom: '30px',
};
const Start = () => (
<span>
<MyButton style={style} size="large">
GET STARTED
</MyButton>
</span>
);
export default Start;
I am trying to change the size of the button.
The Material UI documentation indicates that I should be able to toggle the size property by inserting size="large".
The example given in the documentation is:
<Button size="large" className={classes.button}>
Large
</Button>
I've tried to insert size="large" in the const style in my Start component, in the use of MyButton in the start component and in the Button component itself. None of these attempts do anything to alter the size. The text label in the button looks miniature at the moment and I can't figure out how to manipulate the size.
Can anyone see how to increase the size of the button?
Here is how I have been using it.
You need to set the root Class of the button object (or another available class, refer to the documentation for each available class by components)
import React, { Component } from "react";
import { withStyles } from "material-ui/styles";
import Button from "material-ui/Button";
const styles = theme => ({
button: {
width: "300px",
margin: "0 auto",
textTransform: "uppercase",
padding: "20px 30px",
alignSelf: "center",
},
});
class MyCustomButton extends Component {
render() {
const { classes } = this.props;
return (
<Button color="primary" raised={true} classes={{ root: classes.button }} />
);
}
}
export default withStyles(styles)(MyCustomButton);