i want add style on button without css file-CodePudding

here is my js file and i want to style on the pdfbtn how can i do? i want change the button's location and i also don't want to make a css file bacause i want to change style only button...

import React from 'react';
import ReactToPrint from 'react-to-print';

import Portfolio from './Portfolio';
 
class PdfComponent extends React.Component {
     
    render() {
      return (
        <div>
          <ReactToPrint
            content={() => this.componentRef}
            trigger={() => <button className="pdfbtn btn btn-primary">PDF로 저장</button>}
          />
          <Portfolio ref={(response) => (this.componentRef = response)} />
        </div>
      );
    }
 
}

export default PdfComponent;

CodePudding user response：

You can add a style in React by passing an object into the style attribute:

<div>
  <ReactToPrint
    content={() => this.componentRef}
    trigger={() => <button className="pdfbtn btn btn-primary" style={{leftMargin:"20px"}}>PDF로 저장</button>}
  />
  <Portfolio ref={(response) => (this.componentRef = response)} />
</div>

CodePudding user response：

You can style it by adding inline style prop to the element:

<button style={{ padding: '10px' }} className="pdfbtn btn btn-primary">PDF로 저장</button>

const styles = { button : { padding : '10px' } };

<button style={ styles.button } className="pdfbtn btn btn-primary">PDF로 저장</button>

More details here