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,
...
Related
I tried giving path the to the file 'import '../App.css';' but I get this error
ERROR in ./src/components/Card/Card.js 5:0-20
Module not found: Error: Can't resolve '../App.css' in 'E:\react_projects\comment_cards\src\components\Card'
I think I am giving the path wrong.
If you have created your App.css in same folder as your App.js it means that, when importing the file, you have to go back to that path.
Given your apparent path:
src/components/Card/Card.js
You will have to make the following import:import classes from '../../App.css'
Please note that in React we usually use classes as a name of the import.
If you have to give to a component a class, let's name in .button-content, you will do it like this :
<MyButton className={classes.buttonContent> My Button </MyButton>
import "./component_name/filename.css"
this is the usual way to import css files, but if you are on same folder you can just use
import "./filename.css"
you can also use inline styles in components like
const styles = {
section: {
fontSize: "18px",
color: "#292b2c",
backgroundColor: "#fff",
padding: "0 20px"
},
wrapper: {
textAlign: "center",
margin: "0 auto",
marginTop: "50px"
}
}
and implement like below
<section style={styles.section}>
<div style={styles.wrapper}>
</div>
</section>
import "./components/App.css"
But it depends on from which folder you're importing the module.
For example if you're in component folder and your css file also inside component folder you can use
import "./App.css"
but if you are in the src folder and your css module is in component folder you need to import like this import "./components/App.js"
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
Having trouble with styling table created by react-table library.
Please find the design below.
Table is created the way it is shown in documentation. Is it possible to colour headers as shown in design?
Thank you in advance
P.S.
Here is the code snippet from documentation
To create headers I need to create an array. So i cant change style for a specific header (actually I can provide element to render, but it will be rendered inside the element)
Check this, there are class names added to the data where the data should be styled differently. I think that's what you need.
You can use any react component or JSX to display content in column headers, cells and footers.
const columns = [
{
Header: () => (
<span>
<i className="fa-tasks" /> Progress
</span>
)
}
]
kindly check on this link for further details
https://github.com/tannerlinsley/react-table/tree/v6#custom-cell-header-and-footer-rendering
Had to use a workaround.
As Taha Jamil mentioned you can any JSX to render inside of the Header. By adjusting some styles you will get something like this:
{
Header: () => {
return(
<div
style={{
backgroundColor: "red",
position: "absolute",
width: "100%",
height: "100%",
top: "0px",
left: "0px",
padding: "12px 20px",
}}
>
Title
</div>
);
}
}
Not the best solution, but works
I am not sure if this is the correct way of using CSS in gatsby but for some reason my external syles are not being applied in gatsby project.
This is what I am doing it
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import "./header.css"
const Header = (props) => {
return (
<header
style={{
background: `black`,
marginBottom: `1.45rem`,
}}
>
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `1.45rem 1.0875rem`,
}}
>
<h1 style={{ margin: 0 }}>
<Link
to="/"
style={{
color: `white`,
textDecoration: `none`,
}}
>
{props.siteTitle} <span className="header-description"> {props.description} </span>
</Link>
</h1>
</div>
</header>
)
}
Header.propTypes = {
siteTitle: PropTypes.string,
}
Header.defaultProps = {
siteTitle: ``,
}
export default Header
and this is my header.css
.header-description {
font-size: 12;
}
Your css is invalid. font-size can't have unitless values except for 0.
Maybe you wanted it to be 12px?
what i usually do is create and import index.css into layer component (or any other wrapping component) aaaand then import individual/uniques/modules to that index.css. So the main index.css becomes sort of like a hub for css files which then is being imported only in once place. well, obviously if you would use css modules you would have to import them into your react components, but by the looks of it you are just using classnames. so...yea, try my method, maybe that helps? Theres also like 4 tutorials on how to import and use css and various styling methodologies in gatsby docs.
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']}
/>
</>
)