styling the border css property in react-ag捕鱼王app官网

const app = () => {
  return (
    <div><divstyle={{border: '1pxsolidred'}}>some content herediv><br /><divstyle={{border: '1pxdashedred'}}>some content herediv><br /><divstyle={{border: '1pxsolidrgba(0,255,0,0.3)'}}>
        some content here
      div><br /><divstyle={{border: '2pxdottedred'}}>some content herediv><br /><divstyle={{borderbottom: '2pxdottedred'}}>some content herediv><br /><br /><divstyle={{bordertop: '2pxdottedred'}}>some content herediv>div>
  );
};

export default app;

these examples show how to style an element's border css property in react.

note that we have to wrap the value of the border property in a string.

border: '1px solid rgba(0,255,0,0.3)'}}>
  some content here
</div>

if we need to style only a specific border, for example border-bottom, use the camelcase property name - borderbottom.

borderbottom: '2px dotted red'}}>some content here</div>

multi-word property names are camelcase in the object we pass to react's style property.

alternatively, we can write the styles .cssinto a file with the extension .

.red-border {
  border: 1px solid red;
}

here is how we import and use red-borderthe class.

// 👇️ import css file
import './app.css';

const app = () => {
  return (
    <div><divclassname="red-border">hello worlddiv>div>
  );
};

export default app;

when importing global css files in react, it is best to import the css file into the index.js file.

the index.js file is the entry point of your react application, so it will always be run.

on the other hand, if we import a css file into a component, the css styles may be removed after the component is unmounted.