I have this class in a CSS file (TextBoxStyle.css) -
.CustomTextBox{
width: 100%;
border-radius: 4px;
height: 30px;
}
Then I am trying to use this in a React component -
import React from 'react';
import ReactDOM from 'react-dom';
import styleClass from './TextBoxStyle.css';
export class TextBox extends React.Component{
render(){
return (
<input className={styleClass.CustomTextBox}>
</input>
);
}
}
My project gets build successfully as I have installed all necessary loaders through webpack.
However, the class 'CustomTextBox' does not show up in my final html page.
Please let me know if I need to elaborate on any point.
Highly appreciate any help.
If you don't absolutely need to reference CustomTextBox, you could try importing the CSS directly like so:
import './TextBoxStyle.css';
Then change the className on the input like so:
<input className="CustomTextBox">
Related
Essentially, I want to generate a QR Code in a ReactJS application. I found a generator on npm for React & React Native. Here is how they set it up on the npm site:
import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";
ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));
Here is how I set up the page that will hold the QR Code:
import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";
// empty profile page
class Profile extends React.Component
{
render()
{
return (
<div>
<h1>QR Code Page</h1>
</div>
);
}
}
//ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));
export default Profile;
I have the actual QRCode code commented out, as I'm not sure where to put it in the code so that it works & shows up on the page. When I put it anywhere inside the Profile class the line has red underlines stating that a ";" or ")" is expected (depending on where it's put I get ";" or ")"). I know I'm not missing either, so I'm pretty sure it comes down to where I'm putting the line of code to generate the QRCode.
I'm sorry if this is is an obvious question, I'm still pretty new to React.
Please let me know if you need any more information!
You can just use the <QRCode value="hey"></QRCode>. You also don't need dom library for this. So I've removed it.
import React from "react";
import QRCode from "react-qr-code";
// empty profile page
class Profile extends React.Component
{
render()
{
return (
<div>
<h1>QR Code Page</h1>
<QRCode value="hey"></QRCode>
</div>
);
}
}
export default Profile;
Check out this live version to see it in action
https://codesandbox.io/s/billowing-butterfly-0dr39?file=/src/App.js
you can use it return itself it will work
return (
<div>
<h1>QR Code Page</h1>
<QRCode value="hey" />
</div>)
Try this.
import React from "react";
import QRCode from "react-qr-code";
// empty profile page
class Profile extends React.Component {
render() {
return (
<div>
<h1>QR Code Page</h1>
<QRCode value="hey" />
</div>
);
}
}
export default Profile;
I am currently trying to get myself familiar with the basics of React having previously employed a web development workflow using conventional HTML/CSS/JS. I am using GatsbyJS in conjunction with styled components and encountering the following problem.
I am defining and exporting a styled component named Header as follows:
import React from "react"
import styled from "styled-components"
// header.js
const HeaderWrapper = styled.div`
margin: 3rem auto;
background: black;
padding: 16px;
`
const SiteTitle = styled.h1`
font-size: 32px;
color: white;
`
const Header = props => (
<HeaderWrapper>
<SiteTitle>
{props.siteTitle}
</SiteTitle>
</HeaderWrapper>
)
export default Header
I am then using the exported Header component in my index.js as follows:
import React from "react"
import Header from "../components/header"
// index.js
export default () => (
<Header siteTitle="This is my Site" />
)
However, when viewing my site the text "This is my Site" is being rendered without any of the styles specified in my header.js file. I can’t seem to figure out what I’m doing wrong so any help would be much appreciated.
Thanks very much in advance.
Edit: I added a screenshot of the rendered site (including Chrome Developer tab) below.
https://ibb.co/3FCq751
I'm using Next.js, React, Styled JSX, and Postcss if that matters. I need to style an imported component for a specific page. Since the stylesheets are created for a specific component at the time of render, I figured I could just put the custom styles for the component in with the page specific resources and pass them in. But I'm getting the following error:
Expected a template literal or String literal as the child of the JSX Style tag (eg: <style jsx>{`some css`}</style>), but got MemberExpression
I have two functional renders in two separate directories and files, one a page and the other a component:
src/pages/mypage/
index.js
styles.css
myComponentStyles.css
src/components/MyComponent
index.js
styles.css
Keeping in mind that file/directory referencing is not mirrored from my environment because it's not the problem, here's my code:
src/pages/mypage/index.js
import MyComponent from '../../components/MyComponent'
import styles from './styles.css'
import MyComponentStyles from './myComponentSyles'
const MyPage = () => {
return (
<div className="my-page-container">
<style jsx>{styles}</style>
<MyComponent styles={MyComponentStyles} />
</div>
)
}
export default MyPage
src/components/MyComponent/index.js
import styles from './styles.css'
const myComponent = props => {
return (
<>
<style jsx>{styles}</style>
<style jsx>{props.styles}</style>
<div className="my-component-main-container">MyComponent</div>
</>
)
}
export default MyComponent
How would I allow MyComponent to receive a stylesheet generated by another component?
Although this is not a direct solution to the problem, Styled JSX has a :global() pseudo selector that accomplishes the end goal of styling a component that is outside the scope of the current component. A working example for the given code is:
src/pages/mypage/styles.css
.my-page-container :global(.my-component-main-container){
color: white;
}
Here is what the Next.js documentation says for the :global() pseudo selector:
One-off global selectors
Sometimes it's useful to skip selectors scoping. In order to get a
one-off global selector we support :global(), inspired by css-modules.
This is very useful in order to, for example, generate a global class
that you can pass to 3rd-party components. For example, to style
react-select which supports passing a custom class via
optionClassName:
import Select from 'react-select'
export default () => (
<div>
<Select optionClassName="react-select" />
<style jsx>{`
/* "div" will be prefixed, but ".react-select" won't */
div :global(.react-select) {
color: red
}
`}</style>
</div> )
I'm learning react and I'm trying to put in my personal project some CSS. I was searching for it and I found several ways to do so:
javascript
npm run eject
// and modifi the path [name]__[local]__[]
import Classes from '.../css/style.css'
//using this method
<link rel="stylesheet" src="./css/styles.css">
// in HTML file
//adding react glamor
Which is the correct way to do it?
Hi only import in the component for example
import './my-style.css'
and in the component jsx call clasname normally
<div className="my-class-css">
...
</div>
Like this:
import React, {Component} from 'react';
import './my-style.css'
class MyComponent extends Component{
render(){
return(
<div className="my-class-css">
....
</div>
)
}
}
export default MyComponent;
I installed bootstrap package with command:
meteor add twbs:bootstrap
And I made some example codes, but it does not work. Bootstrap style is not applied to button.
App.jsx
import React from 'react';
export default class App extends React.Component {
render() {
return (
<button class="btn btn-info">Button</button>
);
}
}
Could you help me, please? Thank you.
You should use className attribute instead of class.