Dear stack over flow community.
I am building a react app using create react app where I will show a random joke fetched from an external API.
Here is the code for react component
import React from "react"
function Home(props) {
return (
<div>
<h2>{props.joke.setup}</h2>
<h3>{props.joke.punchline}</h3>
</div>
)
}
I want to include a share functionality to share the current joke on social media. I tried react-share package, but the share button used in there only allows to pass a url. Which in my case will be the base url of my app, and could not include the current joke that I am displaying.
import { FacebookShareButton, FacebookIcon } from "react-share"
<FacebookShareButton url="#">
<FacebookIcon logoFillColor="white" />
</FacebookShareButton>
How could I include a share button that shares the content of react components, values of state or props rather than just url?
For example a share button like the above but has additional props that I can pass content in, props.joke.setup, props.joke.punchline
Thank you very much
I have found a way myself. Sorry I should have read the documentation of react-share package better.
There is optional props that you can pass to the share button. So I did this.
<FacebookShareButton
url="someurl"
quote={props.joke.setup + props.joke.punchline}
hashtag="#programing joke">
<FacebookIcon logoFillColor="white" />
</FacebookShareButton>
You Can Also Use Share Social just use below code
const style = {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
};
console.log(currentPlaylist._id);
return (
<>
<ShareSocial
style={style}
url ={currentPlaylist._id}
socialTypes={['facebook','twitter','reddit','linkedin','email','pinterest']}
/>
</>
)
Related
I am trying to use rgb function in Material Box. How can this be done? This is not working.
Original Code:
<Box
width={24}
style={{
background: `rgb(${appointmentReasonView.rgbColorView})`,
whiteSpace: 'pre-wrap',
}}
>
New Code Attempt:
<Box
width={24}
whiteSpace="preWrap"
background={rgb(${appointmentReasonView.rgbColorView})}
>
Error: Cannot find name 'rgb'
With styled components you can do it like this:
import { styled } from "#mui/system";
const BoxStyled = styled(Box)`
background: ${({ background }) => `rgb(${background})`};
`;
<BoxStyled
width={24}
whiteSpace="preWrap"
background={appointmentReasonView.rgbColorView} // Pass here the value from api
/>
Let me know if it helps (the value from the api should be rendered inside the rgb in the styled component. So when you inspect the lement it should show a correct css value like background: rgb(255 0 0)). Here is a working codesandbox.
I am new to material ui.
I use fifth version.
<InputBase
ref={params.InputProps.ref}
inputProps={params.inputProps}
autoFocus
sx={{
...InputCSS,
}}
/>
const InputCSS = {
width: '100%',
textIndent: '17px',
py: '12px',
fontSize: '20px',
borderRadius: '3px',
border: '1.5px solid rgba(0, 0, 0, 0.4)',
'MuiInputBase-root': { // does not work
borderColor: 'red !important',
color: 'red !important',
},
'&:focus' : { // does not work
...
}
}
I could have used styled('input') and it works, I can set &:focus and it works but I can't type anything in the input.
I want to get rid of the initial border and set focus property.
How can I change the border for this class?
I know that in v5 we can style our components using variants or sx or styled.
What is the best advice for styling mui components? Because almost all the info in the internet uses outdated useStyle or makeStyles which doesn't work with react 18v.
sometimes I just struggle with components styling in mui
You have several ways to customize a Mui component, but my three favorite approaches are:
Styled utility
Sx prop
Custom global theme
So when should I use each of these approaches?
Styled utility
If you want to make a component reusable across your app, go with styled, if you had ever used styled components then styled will be very familiar to you, here is an example of how to use it:
import * as React from 'react';
import Slider, { SliderProps } from '#mui/material/Slider';
import { alpha, styled } from '#mui/material/styles';
// if you are using typescript, don't forget to pass the component props on styled
const SuccessSlider = styled(Slider)<SliderProps>(({ theme }) => ({
width: 300,
color: theme.palette.success.main,
// to override the styles of inner elements,
// you have to use the & selector followed by the class name.
'&.MuiSlider-thumb': {
'&:hover, &.Mui-focusVisible': {
boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`,
},
'&.Mui-active': {
boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`,
},
},
}));
export default function StyledCustomization() {
return <SuccessSlider defaultValue={30} />;
}
To make the component even more dynamically, you can define custom props as well, like width, color, border and so on, read the styled docs to know more about it.
Sx prop
If you want to make an one time off style in a single component, the easiest way is to use the sx prop, but be careful with this approach because it can lead to a lot of repetition in your code. Following the code you gave:
<InputBase
ref={params.InputProps.ref}
inputProps={params.inputProps}
autoFocus
sx={{
...InputCSS,
}}
/>
const InputCSS = {
width: '100%',
textIndent: '17px',
py: '12px',
fontSize: '20px',
borderRadius: '3px',
border: '1.5px solid rgba(0, 0, 0, 0.4)',
// you should pass the & selector followed by the class that you want to override
'&.MuiInputBase-root': {
// avoid the use of !important
borderColor: 'red',
color: 'red',
},
'&.MuiInputBase-root:focus': {
...
}
}
check it out on codeSandbox. Just a suggestion, depending on your case the component TextField could fit better as it comes with some good styles and you don't need to style it from scratch.
Side note:
Every mui component has an api doc with a css section where you can find all available classes to override, for instance, see the InputBase api docs, also read the docs about sx prop.
Custom theme
At last but not least, if you want to customize your whole app with custom palette, components, typography, breakpoints and so on, no doubt you should use a custom theme, as mui provides a powerful tool called createTheme to do so, what I like the most in custom theme is the possibility to make custom variants of the component, like so:
import * as React from "react";
import { createTheme, ThemeProvider } from "#mui/material/styles";
import Button from "#mui/material/Button";
import { red } from "#mui/material/colors";
// if you are using typescript, you must declare the module with the
// custom properties in order to get access of this property when using the component
declare module "#mui/material/Button" {
// define custom variants
interface ButtonPropsVariantOverrides {
dashed: true;
redVariant: true;
}
}
const defaultTheme = createTheme();
const theme = createTheme({
components: {
MuiButton: {
variants: [
{
// use the variant name defined earlier
props: { variant: "dashed" },
// set the styles for this variant
style: {
textTransform: "none",
border: `2px dashed ${defaultTheme.palette.primary.main}`,
color: defaultTheme.palette.primary.main
}
},
{
props: { variant: "redVariant" },
style: {
border: `2px solid ${red[300]}`,
color: red[600]
}
}
]
}
}
});
export default function GlobalThemeVariants() {
return (
// use the theme provider to get access of custom theme
// and variants within any child component
<ThemeProvider theme={theme}>
<Button variant="dashed" sx={{ m: 1 }}>
Dashed
</Button>
<Button variant="redVariant" color="secondary">
custom red variant
</Button>
</ThemeProvider>
);
}
See the example, also take a look at the custom theme docs. Hope I clarified the things a bit!
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 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'm using <Transition> as explained in main documentation of React Transition Group.
import React from 'react';
import PropTypes from 'prop-types';
import Transition from 'react-transition-group/Transition';
const defaultStyle = {
transition: `opacity 300ms ease-in-out`,
opacity: 0,
};
const transitionStyles = {
entering: { opacity: 1 },
entered: { opacity: 1 },
};
const Fade = ({
in: inProp,
children,
}) => (
<Transition in={inProp} timeout={300}>
{state => (
<div
style={{
...defaultStyle,
...transitionStyles[state],
}}
>
{children}
</div>
)}
</Transition>
);
Fade.propTypes = {
in: PropTypes.bool.isRequired,
children: PropTypes.node.isRequired,
};
export default Fade;
It works, but not so well with Material UI, especially with Buttons, everywhere on my app: when I click on them, appears a white div behind them:
<div in="false" style="position: absolute; top: -88.218px; left: -97.218px; height: 220.436px; width: 220.436px; border-radius: 50%; background-color: rgb(255, 255, 255);"></div>
and this weird error in console:
Warning: Unknown props `onExited`, `appear`, `enter`, `exit` on <div> tag. Remove these props from the element.
Those props are about Transition, but I can't understand the problem.
I'm using React 15.6.1, Material ui 0.18.7 and React Transition Group 2.2.0
I encountered this bug today, and I logged an issue + repro case on their github.
https://github.com/callemall/material-ui/issues/8046
(repro: https://codesandbox.io/s/q9o5q0l5nw)
I have tested in v1.0.0-beta.8 and it looks like it's working fine (https://codesandbox.io/s/r5nplz89nn).
The project's stance is essentially "material-ui v0.x is legacy code".
So your options are either; disable ripples across your app, fix it for them via a PR, or move to the unfinished v1 beta branch.