在 React 中设置边框半径属性的样式

Setting style for the border radius property in React

在 React 中使用borderRadiusCSS 属性设置元素的边框半径样式，例如
<div style={{border: '1px solid red', borderRadius: '30px'}}>. 如果您需要设置特定边框的样式，请使用相应的属性，例如
borderBottomLeftRadius.

应用程序.js


const App = () => {
  return (
    <div>
      <div style={{border: '1px solid red', borderRadius: '30px'}}>
        Some content here
      </div>

      <br />

      <div style={{border: '1px dashed red', borderRadius: '25% 10%'}}>
        Some content here
      </div>

      <br />

      <div
        style={{
          border: '1px solid rgba(0,255,0,0.3)',
          borderRadius: '10% 30% 50% 70%',
        }}
      >
        Some content here
      </div>

      <br />

      <div style={{border: '2px dotted red', borderRadius: '10% / 50%'}}>
        Some content here
      </div>

      <br />

      <div
        style={{
          border: '2px solid red',
          borderBottomLeftRadius: '30px',
          borderBottomRightRadius: '30px',
        }}
      >
        Some content here
      </div>
    </div>
  );
};

export default App;

这些示例展示了如何

在 React 中设置元素的border-radius CSS 属性的样式。

请注意，您必须将borderRadius属性的值包装在一个字符串中。

应用程序.js


<div style={{border: '1px solid red', borderRadius: '30px'}}>
  Some content here
</div>

如果没有更新边框半径样式，您可能会在代码中的其他地方覆盖它。

您可以尝试将样式设置为!important.

应用程序.js


<div
  style={{border: '2px solid red'}}
  ref={el => {
    if (el) {
      el.style.setProperty('border-radius', '25% 10%', 'important');
    }
  }}
>
  Hello world
</div>

The function we passed to the ref prop will get called with the element, so we
can programmatically set its properties to important.

If you only need to set the border radius for a specific border, use camelCased
property names – borderBottomLeftRadius, borderBottomRightRadius, etc.

App.js


<div
  style={{
    border: '2px solid red',
    borderBottomLeftRadius: '30px',
    borderBottomRightRadius: '30px',
  }}
>
  Some content here
</div>

Multi-word property names are camelCased in the object we pass to the style
prop in React.

Alternatively, you can write your styles in a file with a .css extension.

App.css


.red-rounded-border {
  border: 1px solid red;
  border-radius: 30px;
}

And here is how we would import and use the red-rounded-border class.

App.js


import './App.css';

const App = () => {
  return (
    <div>
      <div className="red-rounded-border">Some content here</div>
    </div>
  );
};

export default App;

When importing global CSS files in React, it’s a best practice to import the CSS file into your index.js file.

The index.js file is the entry point of your React application, so it’s always
going to be ran.

另一方面，如果您将 CSS 文件导入到组件中，则一旦您的组件卸载，CSS 样式可能会被删除。

–